Cómo crear un efecto de descripción desplegable en CSS

Hoy vamos a ver a cómo hacer un efecto de descripción desplegable en CSS. Les explicaré como funciona. Lo que tenemos es una imagen común y corriente, y cuando pasemos el mouse sobre la imagen aparecerá en la parte inferior una pequeña descripción, para que cuando el mouse se quite de la imagen la descripción desaparezca.

Entonces, después del salto les dejo el tutorial y toda la explicación para lograr nuestro efecto.

Nivel del tutorial: Intermedio
Demostración del tutorial

HTML

Lo que tenemos es una capa que contiene una imagen y una descripción de la misma, esto es lo único que tenemos que manipular, las transiciones y demás contenido será hecho con CSS

Hasta este momento el tutorial debería verse así:

CSS

Usamos CSS para hacer tres cosas importantes:

• Dar estilo tanto a la imagen como a la descripción
• Ocultar la descripción atrás de la imagen
• Mostrar la descripción cuando el mouse esté sobre la imagen

Entonces veamos el código:

Para el tutorial usamos una imagen con link, por si quieren añadir algún enlace a otros sitios. No tiene tanta personalización, sólo la sombra es quizá lo más importante.

En cuanto a la descripción el estilo si es más importante. Lo que hacemos a la descripción es ponerlo en posición absoluta, para que podamos ocultarla sin mucho problema. Después con z-index podemos decirle con el –1 que lo mande hasta atrás. y con el margin le decimos que lo oculte para que no se vea a simple vista. Por último le añadimos una transición para todo lo que cambie, que será el color de fondo y el margen que le vamos a quitar.

Ya por último le decimos que cuando el mouse esté sobre la imagen se despliegue la descripción y que mientras esté activo el link se quede así.

Entonces como vemos el efecto no sólo se ve muy bonito, sino que además es muy fácil de hacer, basta con colocar elementos agrupados para que se logre hacer cualquier efecto.

Si tienen alguna duda o comentario no duden en dejarlo abajo