1. Technology

Make Things Fade In and Out with CSS3

CSS3 Transitions Create Nice Fade Effects

By

CSS
Image courtesy E+ / Getty Images

One fun trick you can do with CSS3 is make your images and other elements fade in and out using the CSS3 properties: opacity and transition. This is a wonderful tool to make your pages more interactive by creating greyed out areas that come into focus when a reader does something.

The Basics: Change Opacity When Mouse Hovers Over

The first thing you need to know how to do is change the opacity when a customer is hovering over an element. For my example I'm using an image with the class greydout:

<img src="puppy-in-shade.jpg" width="300" height="266" class="greydout">

To make it greyed out, I add the CSS:

.greydout {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

Then, to make the image come clear when the mouse is over it, I add the :hover pseudo-class:

.greydout:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

As you can see on my examples page, this is very abrupt. First it's grey and then it's not, with no interim states.

So, to add the interim states, you want to add the transition property to the .greydout class:

.greydout {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
-webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  -o-transition: all 3s ease;
  transition: all 3s ease;

}

Here's an example of the image fading in, rather than just switching abruptly.

Fading Out is Possible Too

You don't have to start with a faded image, you can use transitions and opacity to fade out from a fully opaque image. Using the same image, only with a class of withfadeout:

<img src="http://0.tqn.com/d/webdesign/1/0/C/m/1/puppy-in-shade.jpg" width="300" height="266" class="withfadeout">

Just like before, you change the opacity using the :hover selector:

.withfadeout {
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}
.withfadeout:hover {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

And here is how fading out looks.

You Aren't Limited to Images with This Technique

You can make CSS buttons that fade when clicked and held. You just set the opacity using the :active pseudo-class and put the transition on the class that defines the button. Click and hold this button to see what happens.

It's possible to make essentially any visual element fade when hovered over or clicked on. In this example I change the opacity of the div and the color of the text when the mouse is over it. Here is the CSS:

#myDiv {
  width: 280px;
  background-color: #557A47;
  color: #dfdfdf;
  padding: 10px;
  -webkit-transition: all 4s ease-out 0s;
  -moz-transition: all 4s ease-out 0s;
  -ms-transition: all 4s ease-out 0s;
  -o-transition: all 4s ease-out 0s;
  transition: all 4s ease-out 0s;
}
#myDiv:hover {
  -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
  color: #000;
}

Navigation Menus Can Benefit from Fading Background Colors

In this simple navigation menu the background color fades slowly in and out as I mouse over the menu items. Here is the HTML:

<ul id="sampleNav">
  <li><a href="http://webdesign.about.com/">Home</a></li>
  <li><a href="http://webdesign.about.com/od/css3tutorials/Css3-Tutorials.htm">CSS3 Tutorials</a></li>
  <li><a href="http://webdesign.about.com/od/css/a/aastylelibrary_3.htm">CSS3 Properties</a></li>
</ul>

And here is the CSS:

ul#sampleNav { list-style: none; }
ul#sampleNav li {
  display: inline;
  float: left;
  padding: 5px 15px;
  margin: 0 5px;
  -webkit-transition: all 2s linear;
  -moz-transition: all 2s linear;
  -ms-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
}
ul#sampleNav li a { text-decoration: none; }
ul#sampleNav li:hover {
  background-color: #DAF197;
}

Browser Support

These techniques have very good browser support, and so will look reliably good no matter where you use them. The only exception to this is Internet Explorer. IE does not support the transition property and won't until IE 10. You need to use browser prefixes for the other browsers, as indicated above.

The opacity property is supported by IE 9+, Firefox 3.6+, Chrome 10+, Safari 5+, and Opera 11+. If you need it to work in IE 6, 7, or 8, you can use the alpha filter (filter: alpha(opacity=xx); where xx is the percent opaque). Learn more about using opacity with IE.

Extra Fun—Swap Two Images

Here is an example of how to fade one image into another. Use the HTML:

<div class="swapMe">
<img src="image1.jpg" class="swap1" style="position: absolute;">
<img src="image2.jpg" class="swap2">
</div>

And the CSS which makes one fully transparent while the other is fully opaque and then the transition swaps the two:

.swapMe img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .swap1, .swapMe:hover .swap2 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; } .swapMe:hover .swap1, .swap2 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; }

©2014 About.com. All rights reserved.