Efecto hovering animado con CSS3 en Blogger

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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Cómo obtener la primera imagen del post en Blogger sin Javascript # - Cómo obtener la primera imagen del post en Blogger sin Javascript
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger