A Simple Fade with CSS3

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:

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

• CSS3 Transitions
• CSS Transitions Module Level 3