Este post que es una respuesta a un Usuario que me pregunto lo siguiente:
Y bueno esto es nada mas que un efecto de opacidad que es muy sencillo el cual a continuación lo explicare.
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:
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:
Para enlaces:
Para contenedores:
En cada ejemplo he añadido la línea class="hovering", con eso consigues aplicar la clase.
Y bueno esto es nada mas que un efecto de opacidad que es muy sencillo el cual a continuación lo explicare.
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" />
Para enlaces:
<a class="hovering" href="URL">TEXTO DEL ENLACE</a>
Para contenedores:
<div class="hovering">Contenido</div>
En cada ejemplo he añadido la línea class="hovering", con eso consigues aplicar la clase.
tienes alguna duda? deja tu comentario.
Este Entrada ha sido creada como respuesta a la pregunta de un Usuario.
Este Entrada ha sido creada como respuesta a la pregunta de un Usuario.
