Hovering betweend images, box shadow CSS only

Question

I have partially stacked two images using CSS Grid. The image that the user hovers over increases in z-index and therefore overlays the other. Users can switch back and forth between those two images.

Now I am wondering if it's possible to give the image that it is currently in "focus"/has the higher z-index a box-shadow that appears/disappears, depending which image is on top. Is that even possible using CSS only?

Example of what I mean. And the grey layer seems to have a shadow. http://vrscigroup.com

Answer 1

You can't achieve this with CSS only, you need something that tells CSS which is the card with the higher z-index, after that you can apply a class.

I would add something with js (jquery maybe?) that adds a class and use that class to add the box shadow, something like this:

$('.cards').hover(function() {
   // remove it from all cards
   $('.cards').removeClass('box-shadow');
   // add it to the one on hover only
   $(this).addClass('box-shadow');
});

After that just add the css class:

.cards.box-shadow {
    box-shadow: 0 0 20px #000;
}

Of course, that's just an example :)