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="" 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">

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:

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.