AyudaBloggers{...}
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.

¿Cómo añadir el efecto a Blogger?

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.

Paso 2: Usando el efecto en algún elemento:

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.
Escrito por
víctor calderon

Víctor Calderón es un jóven chileno de 21 años, estudiante analista programador y orgulloso padre de una hermosa niña.

Moderador en +TBEE y escritor/fundador de este blog.

tweet

Blogroll de Ayuda Bloggers