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:

<p class="fade">This is my text element that will fade when you hover over it.</p>

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

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:

<ul class="nav-fade">
   <li>Home</li>
   <li>Tutorials</li>
   <li>Articles</li>
</ul>

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