CSS3 Fade in Fade out Effect

css3 fade in fade out effect

Fade In and Out with CSS3

There was a time, when Javascript or Jquery was used to do any kind of animations on the web pages (forget about flash!). Any animations like fade in, fade out, slide in etc… were done with Jquery. But, now the technology has changed a lot. The CSS3 properties help us to make the web pages awesome. The fun trick you can do with CSS3 is make your images and other elements fade in and out using the CSS3 properties: opacity and transition. CSS3 help us to make our web pages more interactive by creating greyed out areas that come into focus when a reader mouse over an element.

So let us start with the basis fade in effect using CSS3

Basic css3 fade in fade out effect

Inorder to make the fade in fade out effect for any element, the first thing we need to do is change the opacity when a customer is hovering over an element. The following HTML we add for the ‘Fade In Fade Out with CSS3’ example.

HTML for Fade In Fade Out with CSS3

<img src="image.jpg" width="300" height="300" class="greyd-out"/>

CSS for Fade In Fade Out with CSS3

.greyd-out {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

.greyd-out:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

Css explained: Initially we are setting the opacity of the image to ‘0.25’ (we can say 25%). Then on hover of the image we are setting the opacity to ‘1’ which is actual or 100%. Here when we hover the image the change is abrupt. So to add the interim states, we need to add the transition property to the ‘.greyd-out’ class

.greyd-out {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
-webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;
}

Demo for Fade in CSS3

Fade in CSS3

Fade Out

With the same image we can do the fade out effect.

.with-fadeout {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.with-fadeout:hover {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

Demo for Fade Out CSS3

Fade Out CSS3

Browser Support

These techniques have very good browser support, and so will look reliably good. The only exception to this is Internet Explorer. IE does not support the transition property and won’t until IE 10. You need to use browser prefixes for the other browsers, as indicated above.

Only fade in fade out with CSS3?

It does not mean that only fade in fade out is possible with CSS3 animations. We can do a lot of interesting stuffs with CSS3 animation properties. So, now let us see some interesting tricks with CSS3 animations.

Swap Images with CSS3

With CSS3 we can swap two images on hover of the image. For this we need to add two images in our Html.
The following HTML code shows how to add two images for swap image effects.

HTML for Swap Image

<div class="swap-image"><img class="swap-image1" style="position: absolute;" src="image1.jpg" alt="" /> <img class="swap-image2" src="image2.jpg" alt="" /></div>

We have added two images for swapping. Now, let us do the magic with CSS3.

CSS for Swap Image

.swap-image img { 
     -webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
     -ms-transition: all 1s ease-in-out; 
     -o-transition: all 1s ease-in-out; 
     transition: all 1s ease-in-out; 
} 
.swap-image1, .swap-image:hover .swap-image2 { 
     -webkit-opacity: 1; 
     -moz-opacity: 1; 
     opacity: 1; 
} 
.swap-image:hover .swap-image1, .swap-image2 { 
     -webkit-opacity: 0; 
     -moz-opacity: 0; 
     opacity: 0; 
} 

Yes, we are ready to see the magic with CSS3. Before that, let me explain the CSS which we have used. The CSS which makes one image fully transparent while the other is fully opaque and then the transition swaps the two images when we hover the image container (swap-image).

Let us see the demo for swap image

Swap Image Demo

So, now we have learned how to make fade in fade out effects with CSS3. Let us try to do something awesome with CSS3 animation properties, based on the idea of fade in fade out CSS.

Leave a Reply

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