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

score -1 · Accepted Answer · answered Apr 03 '18 at 16:30

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 :)

score -1 · Answer 2 · answered Apr 09 '18 at 19:13

Use :hover pseudoclass here instead of JavaScript. Demo:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

/* overlapping grid items */
.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
  background-color: green;
}

.item-2 {
  grid-row: 2 / 4;
  grid-column: 2 / 4;
  background-color: yellow;
}

/* setting higher z-index on hover */
.item-1:hover {
  z-index: 1;
}

/* adding box shadow */
.item:hover {
  box-shadow: 0 0 10px #000;
}

<div class="grid">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
</div>

Hovering betweend images, box shadow CSS only

2 Answers2