26 marzo 2013 ~ Comentarios desactivados en Efecto hover en imágenes de Blogger

Efecto hover en imágenes de Blogger

En esta oportunidad les presentaré un tutorial mediante el cual podrán aprdender más sobre la plataforma Blogger. Si te interesa el efecto hover, que es el que aparece cuando pasamos el cursor por arriba de un elemento, sea una imagen, un texto o cualquier componente, te enseñaremos a aplicarlo a las imágenes que quieras con la ayuda del lenguaje CSS3.

1111

Afortunadamente el lenguaje CSS3 de programación dedicado a los estilos, no deja de sorprendernos, debido a que contiene funciones muy poco conocidas pero son igual de asombrosas y válidas para mejorar el aspecto de nuestros sitios web. Un claro ejemplo es el efecto particular que les presentaré en esta ocasión, mediante el cual podremos aplicar un efecto hover de acuerdo a desde qué dirección se dirigió el cursor para posarse sobre una determinada imagen.

Este efecto es muy asombroso debido a que si bien muchas páginas utilizan el hover para los botones y enlaces de texto, muy pocas son las que protegen o colocan textos a una determinada imagen a través del lenguaje CSS3 y sin utilizar ningún elemento JavaScript o de otro lenguaje de programación. Esta función de CSS se llama multi-hover y la podremos observar desde cualquier navegador actualizado, debido a que cumple con los estándares web actuales. El mismo consta de que cada vez que pasemos el cursor por una imagen a la cual se aplican las funciones CSS, se moverá desde la dirección desde donde vino el cursor una ventana transparente por encima de la imagen, en donde podremos colocar (si queremos) un texto descriptivo.

El tutorial en donde vi este efecto aplicado a blogs de Blogger es en el blog Vagabundia, propiedad de JMiur, un conocido blogger del medio. Allí encontraremos una guía muy descriptiva en donde nos explicarán los elementos que se utilizan: un bloque HTML utilizando las etiquetas SPAN y DIV, como así también tendremos que agregar los estilos CSS en nuestra plantilla para que los efectos se apliquen a las imágenes que seleccionemos. Como siempre, este blog nos invita a conocer cuáles son los elementos que más importan, y los cuales podremos personalizar a nuestro gusto, en donde podremos cambiar los colores o el texto a mostrar.

Más información | Efecto hover en imágenes de Blogger

Social Share Counters
Tags: ,

Comments are closed.