There was a time when the only way to fade an element or image was by using JavaScript/jQuery (see Creating a Mouseover Fade Effect with jQuery). With CSS3, you can easily create a fade effect with nothing more than a little CSS.

Let’s start with a text element:

This is my text element that will fade when you hover over it.



Now comes the CSS3:


.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.5;
      }



Hover over the text below to see a live demo:


This is my text element that will fade when you hover over it.


Let’s do the same thing with an image:


<img class="fade" src="http://bavotasan.com/wp-content/uploads/2011/09/fadeimage.jpg" alt="" width="200" height="150" />



Hover over the image below to see it in action:




We can also set it up so that a background color fades in. Let’s create a simple menu using an unordered list:


    

  • Home
    • 

  • Tutorials
    • 

  • Articles
    • 







Now for the CSS3:


.nav-fade li {
   background: #fff;
   padding: 3px 8px;
   display: inline-block;
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }

   .nav-fade li:hover {
      background: #ddd;
      }



Let’s see it live:


    

  • Home
    • 

  • Tutorials
    • 

  • Articles
    • 



As you can see, there are quite a few possibilities when it comes to using CSS3 to create a simple fade effect. As always, remember that CSS3 only works on modern browsers.


Resources