How to make the effect of fading with CSS3

There was a time when the effect of slow fading or displays may only be done with JavaScript / jQuery. But with the advent of CSS3 has the effect of fading can be implemented quite simply by adding a few rules of CSS.


How to make a simple fading effect (fade effect)

A. The effect of fading for the text

To realize the effect will assign a new class for a text element:

Source code:

<p class="fade">Это текст, который будет исчезать при наведении курсора мыши </p>

Now we define the rules for CSS3:
Source code:

.fade {
                opacity: 1;
                -webkit-transition: opacity .25s ease-in-out;
                   -moz-transition: opacity .25s ease-in-out;
                            transition: opacity .25s ease-in-out;
}

.fade:hover {
                opacity: 0.5;
}

See the result:

This text will disappear when the mouse

Two. The effect of fading for the image

Assign the same class, which we defined above for the text tag with the image:

Source code:

<img src="photo.jpg" width="578" height="400" class="fade" />

Enjoying the work of the effect in action:



Three. The effect of fading to the background

Create a simple menu structure:

Source code:

<ul class="nav-fade">
   <li>Гланая</li>
   <li>Статьи</li>
   <li>Контакты</li>
</ul>

We define the rules for our menu CSS3:

Source code:

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

We look at the result:

• Glan
• Articles
• Contacts

As you can see everything is easy to create a fading effect and the appearance of using CSS3. New features allow you to realize many things easier and more convenient. However, remember that the specification CSS3 only works on recent versions of modern browsers. If you want to make this effect work everywhere, then you have a long way - using JavaScript.