Hover over an image above another one

Question

I'm trying to make a zoom on hover over an image, I have two images, the second one is correct as you can see but I have a problem with the first one and I don't understand where this is coming from.

.examples {
text-align: center;
margin-top: 20px;
}

.examples img {
aspect-ratio: 3/2;
object-fit: contain;
padding: 10px;
width: 20%;
margin: auto;
background-color: rgba(10, 10, 10, .65);
border: 2px solid rgba(255, 255, 255, .09);
backdrop-filter: blur(4px);
-webkit-border-radius: 7px;
transition: transform .4s;
}

.examples>img:hover {
transform: scale(2.5);
}

<div class="examples">
<img src="https://source.unsplash.com/user/c_v_r/400x400" alt="Free unsplash image">
<img src="https://source.unsplash.com/user/c_v_r/400x400" alt="Free unsplash image">
</div>

It actually fixes itself if I take away the dark border but with the border it doesn't work and I would like to keep the border. Thanks.

Answer 1

This is a partial solution in the hopes it may be sufficient in your use case, or at least help towards a fuller answer.

The problem arises because filter creates a new stacking context, so no amount of z-index setting is going to make a difference, the second img will always be on top.

This snippet removes the filter blur on all the children on hover of the parent, restoring it just for the img that is being hovered (hence you get a blurred version of the other img when an img is hovered.

.examples {
  text-align: center;
  margin-top: 20px;
}

.examples img {
  aspect-ratio: 3/2;
  object-fit: contain;
  padding: 10px;
  width: 20%;
  margin: auto;
  background-color: rgba(10, 10, 10, .65);
  border: 2px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(4px);
  -webkit-border-radius: 7px;
  transition: transform .4s;
}

.examples:hover>img {
  backdrop-filter: none;
}

.examples>img:hover {
  transform: scale(2.5);
  backdrop-filter: blur(4px);
}

<div class="examples">
  <img src="https://source.unsplash.com/user/c_v_r/400x400" alt="Free unsplash image">
  <img src="https://source.unsplash.com/user/c_v_r/400x400" alt="Free unsplash image">
</div>