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:


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.
Resources

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie