Cómo hacer un efecto ‘Reveal Hover’ usando CSS3

Hoy vamos a realizar un efecto muy bueno en CSS3. El efecto consiste en tener un cuadro negro con una descripción que al pasar el cursor se despliegue y muestre una imagen. No conozco ningún nombre oficial a este efecto, por eso le he llamado efecto ‘Reveal Hover’, todo en inglés para que se escuche más profesional jeje. Este efecto se podría hacer con jQuery y una función animate, pero la idea es mostrar las nuevas posibilidades con CSS3, además de que con esto podrían aplicarlo muchas veces teniendo la estructura base del efecto.

Entonces, a continuación empezamos con el tutorial para hacer un efecto de ‘Reveal Hover’ usando CSS3.

Nivel de dificultad: fácil
Recomendado para ver en Safari o Google Chrome
Ver ejemplo en funcionamiento

HTML

Como todo buen tutorial lo primero que tenemos que hacer es crear la estructura de nuestro efecto, para después poder animarla. Lo primero que tenemos que ver es que este efecto debe constar de dos capas.

La 1° capa tiene una imagen que se ocultará por medio de otra capa que tendrá un fondo negro con una descripción.

Por si las dudas siempre agrego una tercera capa que almacena todo lo anterior, pero no necesariamente es obligatorio.

Entonces, el código sería este:

Las capas en esta ocasión tienen clases en vez de id’s porque se podría usar para muchas imágenes. Y la simbología también es muy simple: top es para el contenedor principal, first para la capa de descripción, y second para la capa de la imagen.

CSS

Esta es quizá la etapa difícil, porque se le tiene que echar talacha. Primero veamos el código y luego lo que hace.

Tenemos 5 declaraciones de estilos, la primera es para el contenedor ’first’, le agregamos un margen a la izquierda, una posición relativa, un ancho 20 px más que el tamaño original para compensar el padding de abajo, un borde gris de 1px, y lo más importante: overflow hidden, el cuál nos permite que no haya desbordamiento de lo que contenga, o que no se salga del cuadro la imagen y descripción.

Después configuramos .top y sus capas hijas, con ancho y altura de 200px, un padding de 10px a los 4 lados, un fondo blanco, y lo más importante: una transición, para que mueva animadamente el left, o posición izquierda de la descripción.

La tercera es .top .first, y es solo para asegurarnos de tener el mismo nivel de capa, con el z-index, para que estén parejos, y que la capa de la imagen sea la capa que está oculta.

La cuarta es solo para configurar el fondo de la capa de descripción.

Por último está .top:hover .first, donde aplicamos otra transición para modificar el left de nuevo, pero ahora colocando un left de –250px, para que cuando el cursor esté sobre la capa se vaya a ese left, y como tenemos overflow activado, no se va a ver el cuadro por fuera.

Entonces, si hicieron todo ya debería estar funcionando su imagen con sus descripción. Hay un punto a considerar. Los tamaños de ancho y alto, así como left dependen del tamaño de la imagen, así que asegúrense que sean exactos, y que en la clase .top haya 20px más de ancho y alto.

Vía bavotasan