Fade Effect using CSS3

You may have seen Fade (Fade in and fade out) effects on many websites. When you hover mouse over any image or link or text area, it fades out or fades in. Such effect can now easily be implemented using CSS3.

Fade Effect on a text area

Write some text under class fadetext

<div class="fadetext">
<!-- put some text here -->
</div>

Now add following CSS

.fadetext {
opacity: 1;
transition: opacity .30s ease-in-out;
-moz-transition: opacity .30s ease-in-out;
-webkit-transition: opacity .30s ease-in-out;
}

.fadetext:hover {
opacity: 0.4;
}

Fade effect on an image:
Display an image under class fadeimage.

<div class="fadeimage">
<img src="img/1.jpg" />
</div>

Now add following CSS

.fadeimage img{
opacity: 1;
transition: opacity .50s ease-in-out;
-moz-transition: opacity .50s ease-in-out;
-webkit-transition: opacity .50s ease-in-out;
}

.fadeimage img:hover {
opacity: 0.4;
}

Fade Effect on links
In this we will fade background of links.
Prepare some links under class fadelink

<div class="fadelink">
<a href="#">Home</a> / <a href="#">About Us</a> / <a href="#">Blog</a> / <a href="#">Contact</a> / 
</div>

Now add following CSS

.fadelink a {
text-decoration: none;
color: #474747;
padding: 4px 10px;
transition: background .50s ease-in-out;
-moz-transition: background .50s ease-in-out;
-webkit-transition: background .50s ease-in-out;
}

.fadelink a:hover {
background: #b3b3b3;
color: #1d1d1d;
}

Done!!
Check live demo and download.