Efecto hover con CSS3 para pies de foto

Efecto hover con CSS3 para pies de foto

El de hoy es un tutorial de esos sencillos pero que visualmente hacen que una web pueda marcar diferencias.
Utilizando nada más que hojas de estilo vamos a crear pies de foto que aparezcan elegantemente cuando hagamos hover sobre la imagen en cuestión. Es muy útil para tu portfolio, un catálogo de productos o una simple galería de fotos.

Empezaremos montando el código HTML. Creamos una cuadricula simple con listas desordenadas (<ul></ul>) en la que cada elemento de la lista contendrá la imagen y la información dentro de la etiqueta <figcaption>

 CSS3: dando forma

Lo primero es darle algo de estilo a la parrilla básica que hemos creado y los elementos <li>

Los elementos del listado se irán colocando uno junto al otro con el inline-block y además, nos permite centrar el texto fácilmente con el text-align: center
Teniendo en cuenta que la etiqueta <figcaption> se posicionará de manera absoluta, tenemos que delimitar su posición ajustando el <figure> con position: relative. Además, vamos a ocultar todo lo que quede fuera de la capa.

Cómo deciamos, nuestro <figcaption> aparecerá de manera absoluta. En un primer instante vamos a dejarlo completamente transparente, pero ya definimos mediante los parametros transform y transition de CSS3 que aparecerá desde abajo a una determinada velocidad. Además, le damos algunos estilos básicos: fondo, 100% de ancho, etc. y los estilos de los elementos que van en el interior

Para conseguir el efecto deseado, tenemos que añadir un poco de código para la imagen. Concretamente, al igual que antes, un tiempo de transition y un efecto determinado cuando se produzca el hover con transform

Y ya, con todo preparado y la imagen lista para la acción, solo nos queda mostrar la información que tenemos en nuestro elemento <figcaption>. Le cambiamos la opacidad para que sea visible y definimos los tiempos que va a tomar la acción

Y listo. Unas pocas lineas de CSS y tenemos preparado un efecto visualmente muy llamativo  que puede marcar diferencias.

Descargar ejemplo

¡Compártelo!

Deja un comentario

Tu dirección de email no será publicada.