CSS3: efecto fade

Ya os enseñe como poder crear este efecto fade con jQuery. Hoy os muestro como poder hacer este efecto utilizando solo CSS3 muy fácil.

Para crear el efecto «fade» basta con aplicar opacidad de 0 a 100 en este caso al evento hover. En este ejemplo voy a aplicar el 20% a 100% de opacidad.

Voy a crear una clase CSS llamada «fade» y se la vamos a aplicar en este caso a una imagen.

.fade{
    opacity: 0.2;

    -webkit-transition: opacity 0.3s;
   transition: opacity 0.3s;
}
.fade:hover {
    opacity: 1;
}

Sitúate sobre la foto para ver el efecto: