CSS3 Transitions-Cross Fading

CSS3 Transitions for Cross fading effect

CSS3 Transitionsenables us to create cross fading effect using only CSS3. Previously we used jQuery or javascript for achieving Cross Fading effect in our web pages. The new features in CSS3 like transitions and transform helps to create animations or different types of effects for our web pages. Now a days all the web developers, make use of the CSS3 Animations to make their pages more attractive. Here, I am going to give an example of cross fading effect using only CSS3. These effects can be used on our websites while we create image galleries or for showing details of an image, when we hover the image.

CSS3 Transitions – Cross Fading explained with example

We’ll use two images for making the cross fading effect with CSS3 transitions. We have to place the image one above the other. The following HTML will show how to add the images for our web pages.

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, the image with class name ‘second’ will be displayed with a fade in effect. 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 CSS3 transitions helps to create the feeling of cross fading, that is fading from one image to the other.

Demo for CSS3 Transitions-Cross Fading