Corey Corey - 4 months ago 10
CSS Question

Animating a block element to "fade above" another one

I've got some images links that overlap, and on hover I want the one hovered to appear above the rest.

It's easy to just change the z-index on hover and make that one appear above the rest. But I'm looking for some slicker animation here. I don't think there is a way to animate z-index in CSS, but is there some other opacity trick here I'm missing that could make these links look like they are "fading above" the others?

<div class="block-links">
<a href="#" style="background-image:url(http://placekitten.com/400);"></a>
<a href="#" style="background-image:url(http://placekitten.com/500);"></a>
</div>


Codepen: http://codepen.io/tenold/pen/dXmXyX

Answer

One option would be to use two elements for your first image, one "behind" and one "in front" of the second image. Set the opacity of the "front" image to 0 and animate that property to 1 on hover. See: http://codepen.io/slrubinstein/pen/EyEyya

#front {
  position: absolute;
  opacity: 0;
  transition: opacity .5s;
}

#front:hover {
  opacity: 1;
}
Comments