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

Let's 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) I'm 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.  100% would be fully opaque with no transparency 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, I am 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;

}

With this code, the change would transition gradually rather than just switching abruptly.

Once again, we are using a number of vendor prefixed rules here.

Transition is not as well supported as opacity, so these prefixes do make sense.

One thing to remember as you plan these interactions is that touch screen devices do not have a "hover" state, so these effects are often lost on anyone using a touch screen device like a mobile phone. The transition will often happen, but it happens so fast that they really can't be seen.  That is fine if you are adding this as a nice bonus effect, but avoid any changes that NEED to be seen for content to be understood.

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:

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;
}

In this example, the image would transition from fully opaque to somewhat transparent - the reverse of our first example.

Going Beyond Images

It's excellent that you can apply these visual transitions and fades to images, but you are not limited to just using images with these CSS effects. You can easily make CSS-styled buttons that fade when clicked and held. You would 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:

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

As I have touched upon a few times already, these styles have very good browser support,so you should feel free to use them without any trepidation. The only exception to this is much older versions of Internet Explorer, but with Microsoft's recent decision to end support for all versions of IE below 11, these older browsers are becoming less and less of an issue - and realistically, if an older browser does not see this fade transition, that should not be a major problem.

As long as you confine these kinds of effects to enjoyable interactions and do not rely on them to drive functionality or reveal key content, then older browsers that do not support the effects will get a less enjoyable experience, but users on those browsers will not even know the difference, especially if they can use the site as normal and get the information that they need.

Extra Fun—Swap Two Images

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


 

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; }

Original article by Jennifer Krynin. Edited by Jeremy Girard on 4/3/17.