Efecto hovering animado con CSS3 en Blogger

La pseudo clase :hover permite aplicar atributos a un selector al cual se le ha situado el cursor sobre él, con este elemento y gracias a unos valores CSS3 es posible aplicar efectos que antes se podían hacer sólamente con Javascript o jQuery.

El efecto de hovering incluye una transición que es posible de previsualizar en la mayoría de los navegadores actuales (Excluyendo Internet Explorer).


Vista previa del efecto (Sitúa el cursor encima de algún elemento):



Tal como se puede apreciar utilicé imágenes pero se puede hacer con cualquier tipo de contenido.


Paso 1: Añadiendo CSS:

En ''Diseño | Edición HTML'' (''Plantilla | Editar plantilla'' si usas Blogger 2011), deberás buscar el siguiente código:

]]></b:skin>

Arriba de este, deberás pegar el siguiente:

.hovering {opacity:0.6;} /*Opacidad inicial*/
.hovering:hover {
opacity:1;  /*Opacidad al pasar el mouse*/
-webkit-transition-property: opacity; -webkit-transition-duration: 300ms; /*Tiempo de la transición varios navegadores*/
-moz-transition-property: opacity; -moz-transition-duration: 300ms; /*Tiempo de la transición para Firefox*/
}

Guarda los cambios y listo.


Para realizar esto es necesario saber a qué se le dará el efecto, deberás añadir la clase hovering a éste. Utilizaremos algunos ejemplos:

Para imágenes:

<img  class="hovering" src="URL IMAGEN" />

Ejemplo:
Para enlaces:

<a class="hovering" href="URL">TEXTO DEL ENLACE</a>

Ejemplo:
Este es un enlace

Para contenedores:

<div class="hovering">Contenido</div>

Ejemplo:

Este es un contenedor div

En cada ejemplo he añadido la línea class="hovering", con eso consigues aplicar la clase.