Search code examples
jquerycsscss-transitionsfadeinopacity

CSS fading multiple images. Delaying opacity transition. Webkit transition delay

I am trying to fade in 3 images stacked on top of one another. Using just CSS transitions.

Here is my codepen:

http://codepen.io/FredHair/pen/MYQZJv?editors=110

I have managed to fade into the first image but am unsure how to correctly delay and fade into the third image.

I have found alot of questions on here similar to this but none of them helped me decipher exact code needed to achieve this.

My code:

HTML

<body>
 <div id="fadeImage">
<img id="image1" src="http://testdigits.com/wp-   content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
<img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
<img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>

CSS

#image1{
position: absolute;
left: 200px;
z-index: 3;
}

#image2{
 position: absolute;
 left: 200px;
z-index: 2;
}

#image3{
position: absolute;
left: 200px;
z-index: 1;
}

#image1:hover{
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:1s;
}

#image2:hover {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
opacity: 0;
transition-delay:3s;
}
}

I would like to achieve this preferably only using CSS but if you know an easy jQuery fix I would also like to see that as well.

Thankyou for any help

MrB

Solution

  • You'll want to set the :hover on #fadeImage instead of the individual images. Here's my solution:

    #fadeImage {
  position: relative;
}

#fadeImage img {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  transition: opacity 1s linear;
}

#image1 {
  z-index: 3;
}

#image2 {
  z-index: 2;
}

#image3 {
  z-index: 1;
}

#fadeImage:hover #image1 {
  opacity: 0;
}

#fadeImage:hover #image2 {
  opacity: 0;
  transition-delay: 3s;
}
    <div id="fadeImage">
  <img id="image1" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame1.png" alt="OpacAnimFrame1" >
  <img id="image2" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame2.png" alt="OpacAnimFrame2" >
  <img id="image3" src="http://testdigits.com/wp-content/uploads/2015/02/OpacAnimFrame3.png" alt="OpacAnimFrame3" >
</div>