Corey Corey - 10 months ago 36
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(;"></a>
<a href="#" style="background-image:url(;"></a>



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:

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

#front:hover {
  opacity: 1;