Home » CSS 3 » CSS3 Transitions – Cross Fading

CSS3 Transitions – Cross Fading

css3 Transitions

CSS3 enables us to create cross fading effect using only CSS. Previously we used jQuery or javascript for achieving this. Here, I am going to give an example of cross fading effect using only CSS3. This effect or this example can be used on your websites for showing image galleries or for showing details of an image, when we hover the image.

CSS3 Transitions – Cross Fading explained with example

Here I am using two images for showing this example. We have to place the image one above the other.

HTML required for CSS3 Transitions – Cross Fading

<div id="my_images">
   <img alt="image1" class="second" src="j0178405.jpg" />
   <img alt="image2" class="first" src="j0178379.jpg " />
</div>

CSS required for CSS3 Transitions – Cross Fading

#my_images {
  position: relative;
  height: 257px;
  width: 400px;
}

#my_images img {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#my_images img.first:hover {
  opacity:0;
}

Image with class name first will be displaying by default. When we hover on the image image with class name second will be displayed. When we hover on the image with class name ‘first’, we are setting the opacity of this image to ‘0’ so that the second image is visible and the transition helps to create the feeling of cross fading, that is fading from one image to the other.

Demo for CSS3 Transitions – Cross Fading

image1 image2

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*