Make Webpage Elements Fade In and Out with CSS3

CSS3 Transitions create nice fade effects

CSS
Image courtesy E+ / Getty Images

Web designers had long desired more control over the pages they were creating when CSS3 hit the scene. The new styles introduced in CSS3 gave web professionals the ability to add Photoshop-like effects to their pages. This included properties like drop shadows and glows, rounded corners, and more. CSS3 also introduced animation-like effects that can be used to create nice interactivity on sites. 

One very nice visual effect you can add to elements in your website using CSS3 is to make them fade in and out using a combination of the properties for opacity and transition. This is an easy and well-supported way to make your pages more interactive by creating faded areas that come into focus when a site visitor does something, like hovering over that element.

Let's take a look at how easy it is to add this interacting visual effect to various elements on your web pages.

Change Opacity on Hover

We will start by looking at how to change the opacity of an image when a customer is hovering over that element. For this example (the HTML is shown below) we're using an image with the class attribute of 

greydout.

To make it greyed out, we add the following style rules to our CSS stylesheet:

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

These opacity settings translate to 25%. This means that the image will be shown as 1/4 of its normal transparency. Fully opaque with no transparency would be 100% while 0% would be totally transparent.

Next, to make the image come clear (or more accurately, to become fully opaque) when the mouse is hovered over it, you would add the

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

You will notice that, for these examples, we are using the vendor prefixed versions of the rule to ensure backward compatibility for older versions of those browsers. While this is a good practice, the reality is that the opacity rule is now well supported by browsers and it is pretty safe to drop those vendor prefixed lines. Still, there is also no reason not to include these prefixes if you want to ensure support for older browser versions. Just be sure to follow the accepted best practice of ending the declaration with the normal, un-prefixed version of the style.

If you deployed this on a site, you would see that this opacity adjustment is a very abrupt change. First, it's grey and then it's not, with no interim states between those two. It is like a light switch - on or off. This may be what you want, but you may also want to experiment with a change that is more gradual.

To add a really nice effect and make this fade gradual, 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;
}