Las animaciones para revelar titulos y descripciones al hacer hover a una imagen, nos ayudan a dar dinamismo a nuestra web; logrando mostrar mas contenido en menos espacio.

Para realizar estas animaciones nos valdremos de propiedades css3, tales como “transform y transition”.

La estructura html básica a usar sería de un contenedor que abarque la “imagen” y el “cover o máscara” con el titulo la descripción y el link.

1
2
3
4
5
6
7
8
<div class="contenedor-img">
<img src="imgejemplo.jpg" alt="" />
<div class="mascara">
<h2>Ejemplo</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam in ullamcorper malesuada.</p>
<a class="link" href="#">Leer mas</a>
</div>
</div>

A esta estructura base tenemos que asignar estilos para que la máscara quede sobre la imagen. Asignamos un width y height a nuestro contenedor, así como overflow:hidden para esconder todo lo que este fuera.
A la máscara le ponemos position:absolute para que quede encima de la imagen; también asignaremos estilos al titulo, descripción y link para que se acomoden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*Estilos Base*/
.contenedor-img {
width: 300px;
height: 200px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #fff;
}
.contenedor-img .mascara,.contenedor-img .contenido {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0
}
.contenedor-img img {
display: block;
position: relative;

}
.contenedor-img h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.9);
margin: 20px 0 0 0
}
.contenedor-img p {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 10px;
text-align: center
}
.contenedor-img a.link {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #222;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 1px #000
}
.contenedor-img a.link:hover {
box-shadow: 0 0 5px #000
}

Con esta estructura base vamos a mostrar distintas animaciones simples y vistosas para revelar el titulo y la descripción.

Ejemplo 1

Para este caso haremos que al hacer hover a la imagen el titulo entre por la derecha, la descripción por la izquierda y el link por abajo.

ejm1

Usaremos la siguiente estructura, la cual es solo agregar la clase “ejemplo-1” al contenedor:

1
2
3
4
5
6
7
8
<div class="contenedor-img ejemplo-1">  
     <img src="imgejemplo.jpg" />  
     <div class="mascara">  
         <h2>Ejemplo 1</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>  
</div>

Para dar las animaciones usaremos “transition: ease-in-out”, “transform” con “translateX(Xpx)” y “translateY(Ypx)”. Con translateX nosotros podremos desplazar a la derecha o izquierda(valores negativos desplazan a la izquierda), con translateY desplazamos hacia arriba o hacia abajo (valores negativos desplazan hacia arriba).

El titulo lo desplazamos a la izquierda para ello asignamos “translateX(-200px)”, a la descripcion la movemos a la derecha “translateX(200px)” y al link lo bajamos “translateY(100px)”.
Con el hover todos ellos deben regresar a su posición original; así que ponemos transform: translateX(0px) y transform: translateY(0px).
Para que se la animación se vea suave la usaremos opacity:0; el cual le dará un pequeño fundido al mostrarse.

Los estilos quedarían:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/*Ejemplo 1*/
.ejemplo-1 img {
transition: all 0.2s linear;
}
.ejemplo-1 .mascara {
opacity: 0;
background-color: rgba(46,157,120, 0.7);
transition: all 0.3s ease-in-out;
}
.ejemplo-1 h2 {
transform: translateX(-200px);/*Desplazamos a la izquierda*/
opacity: 0;
transition: all 0.7s ease-in-out;
}
.ejemplo-1 p {
transform: translateX(200px);/*Desplazamos a la derecha*/
opacity: 0;
transition: all 0.4s linear;
}
.ejemplo-1 a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.ejemplo-1:hover img {
transform: scale(1.1);/*Damos un ligero zoom a la imagen*/
}
.ejemplo-1:hover .mascara {
opacity: 1;
}
.ejemplo-1:hover h2,
.ejemplo-1:hover p,
.ejemplo-1:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.ejemplo-1:hover p {
transition-delay: 0.1s;
}
.ejemplo-1:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}

Para ver la demo AQUÍ

Ejemplo 2

En este ejemplo, al hover el background de la máscara entrara en diagonal desde la esquina inferior derecha, el titulo desde la esquina superior derecha y la descripción de la esquina inferior izquierda.

ejm2

En este caso tendremos que modificar un poco el HTML, separaremos el mascara del título, descripcion y link; y los agruparemos en un contenedor llamado “contenido”

1
2
3
4
5
6
7
8
9
<div class="contenedor-img ejemplo-2">  
     <img src="test.jpg" />  
     <div class="mascara"></div>
     <div class="contenido">
         <h2>Ejemplo 2</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>
</div>

Para crear ese efecto de la máscara en diagonal, la rotaremos 45 grados “rotate(45deg)” y la moveremos por donde queremos que aparezca, en este caso esquina inferior derecha para ello usaremos “translate(Xpx, Ypx)”. Para el hover usaremos “transform: translate(-96px, -120px)” estos valores van a variar dependiendo del tamaño de la imagen.

En el titulo y la descripción asignamos “transform: translate(200px, -200px);” y “transform: translate(-200px, 200px);” respectivamente. Para el hover “transform: translate(0px,0px);” con lo que los regresaremos a su posición original.
También usaremos “transition-delay” para que se muestre uno a uno cada elemento y no todos a la vez.

Los estilos quedarían:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*Ejemplo 2*/
.ejemplo-2 img {
transition: all 0.2s ease-in;
}
.ejemplo-2 .mascara {
background-color: rgba(25,96,184, 0.8);
width: 300px;
padding: 60px;
height: 300px;
opacity: 1;
transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
transition: all 0.5s ease-in-out;
}
.ejemplo-2 h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transform: translate(200px, -200px);/*Desplazamos el título arriba a la derecha*/
transition: all 0.3s ease-in-out;
}
.ejemplo-2 p {
transform: translate(-200px, 200px);/*Desplazamos la descripción abajo a la izquierda*/
transition: all 0.4s ease-in-out;
}
.ejemplo-2 a.link {
transform: translate(0px, 100px);/*Desplazamos el link para abajo*/
transition: all 0.3s 0.1s ease-in-out;
}

.ejemplo-2:hover .mascara {
opacity:1;
transform: translate(-96px, -120px) rotate(45deg);
}
.ejemplo-2:hover h2 {
transform: translate(0px,0px);
transition-delay: 0.3s;
}
.ejemplo-2:hover p {
transform: translate(0px,0px);
transition-delay: 0.4s;
}
.ejemplo-2:hover a.link {
transform: translate(0px,0px);
transition-delay: 0.5s;
}

Para ver la demo AQUÍ

Ejemplo 3

Para este ejemplo haremos el efecto de la máscara empujando a la imagen.

ejm3

Usaremos la siguiente estructura, la cual es solo agregar la clase “ejemplo-3” al contenedor:

1
2
3
4
5
6
7
8
<div class="contenedor-img ejemplo-3">  
     <img src="test.jpg" />  
     <div class="mascara">
         <h2>Hover Effects</h2>  
         <p>Efectos hover para tus imágenes, portafolio, galerias.</p>
         <a href="#" class="link">Ver más</a>  
     </div>
</div>

Para lograr este efecto moveremos la máscara a la izquierda “transform: translateX(-300px);” y en el hover la regresaremos a su lugar “transform: translateX(0px);”, la imagen en el hover la desplazaremos a la derecha “transform: translateX(300px);”.

Los estilos quedarían:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*Ejemplo 3*/
.ejemplo-3 img {
transition: all 0.4s ease-in-out;
}
.ejemplo-3 .mascara {
background-color: rgba(128,96,0,0.5);
transform: translateX(-300px);/*Desplazamos 300px a la izquierda*/
opacity: 1;
transition: all 0.4s ease-in-out;
}
.ejemplo-3 h2{
background: rgba(255, 255, 255, 0.3);
color: #000;
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.ejemplo-3 p{
color: #333;
}
.ejemplo-3:hover .mascara {
transform: translateX(0px);/*Regresamos a su posicioón original*/
}
.ejemplo-3:hover img {
transform: translateX(300px);/*Desplazamos 300px a la derecha*/
}

Para ver el ejemplo AQUÍ

Ejemplo 4

En este ejemplo haremos zoom-out a la imagen y la máscara entrara girando 180grados.

ejm4
Usaremos el siguiente html:

1
2
3
4
5
6
7
8
<div class="contenedor-img ejemplo-4">  
     <img src="imgejemplo.jpg" />  
     <div class="mascara">
         <h2>Ejemplo 4</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>
</div>

A la imagen le asignaremos “transform: scale(0);” para que haga zoom-out, la máscara empezará rotada y de tamaño 0 “transform: scale(0) rotate(-180deg);” y al hover lo regresaremos a su estado original “transform: scale(1) rotate(0deg);”

Los estilos quedarían:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.ejemplo-4 img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
}
.ejemplo-4 .mascara {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transform: scale(0) rotate(-180deg);/*Rotamos 180grados y le damos tamaño 0*/
transition: all 0.4s ease-in;
border-radius: 0px;
}
.ejemplo-4 h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.ejemplo-4 p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.ejemplo-4 a.link {
opacity: 0;
transition: all 0.5s ease-in-out;
}

.ejemplo-4:hover .mascara {
opacity: 1;
transform: scale(1) rotate(0deg);/*Regresamos a su tamaño y posición original*/
transition-delay: 0.2s;
}
.ejemplo-4:hover img {
transform: scale(0); /*Efecto zoom-out*/
opacity: 0;
transition-delay: 0s;
}
.ejemplo-4:hover h2,
.ejemplo-4:hover p,
.ejemplo-4:hover a.link{
opacity: 1;
transition-delay: 0.5s;
}

Nosotros podemos controlar desde que zona queremos que se produzca el efecto, para ello usamos “transform-origin:X Y;”. Con unas pequeñas modificaciones haremos que la imagen desaparezca desde una esquina y la máscara aparezca desde la otra.

1
2
3
4
5
6
7
8
<div class="contenedor-img ejemplo-4-1">  
     <img src="imgejemplo.jpg" />  
     <div class="mascara">
         <h2>Ejemplo 4-1</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*Ejemplo 4-1*/
.ejemplo-4-1 img {
transition: all 0.4s ease-in-out 0.2s;
opacity: 1;
transform-origin:100% 100%; /*Desde la esquina inferior derecha*/
}
.ejemplo-4-1 .mascara {
background-color: rgba(0,0,0,0.8);
opacity: 0;
transition: all 0.4s ease-in-out 0.2s;
transform-origin:0% 0%; /*Desde la esquina superior izquierda*/
transform: scale(0);
}
.ejemplo-4-1 h2{
opacity: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
transition: all 0.5s ease-in-out;
}
.ejemplo-4-1 p {
opacity: 0;
transition: all 0.5s ease-in-out;
}
.ejemplo-4-1 a.link {
opacity: 0;
transition: all 0.5s ease-in-out;
}

.ejemplo-4-1:hover .mascara {
transform: scale(1);
opacity: 1;
transition-delay: 0.3s;
}
.ejemplo-4-1:hover img {
transform: scale(0);
opacity: 0;
transition-delay: 0s;
}
.ejemplo-4-1:hover h2,
.ejemplo-4-1:hover p,
.ejemplo-4-1:hover a.link{
opacity: 1;
transition-delay: 0.5s;
}

Para ver el ejemplo AQUÍ

Ejemplo 5

En este ejemplo haremos zoom con fade el cual dará el efecto de que la imagen se transforma en la máscara.

ejm5

El html a usar:

1
2
3
4
5
6
7
8
<div class="contenedor-img ejemplo-5">  
     <img src="imgejemplo.jpg" />  
     <div class="mascara">
         <h2>Ejemplo 5</h2>  
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae tortor diam  in ullamcorper malesuada.</p>
         <a href="#" class="link">Leer mas</a>  
     </div>
</div>

Para dar el efecto usaremos scale y opacity.
A la imagen le asignaremos “transform: scale(10); y “opacity: 0;” en el hover. A la máscara de “opacity:0” a “opacity:1” en el hover. Para el título, descripción y link les asignaremos, “transform: scale(0); y opacity:0;” y en el hover “transform: scale(1); y opacity:1;”

Los estilos quedarían:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/*Ejemplo 5*/
.ejemplo-5 img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;

}
.ejemplo-5 .mascara {
background-color: rgba(119, 80, 21, 0.9);
transition: all 0.5s linear;
opacity: 0;
}
.ejemplo-5 h2{
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
background: transparent;
margin: 20px 40px 0px 40px;
transform: scale(0);
color: #fff;
transition: all 0.5s linear;
opacity: 0;
}
.ejemplo-5 p {
color: #fff;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}
.ejemplo-5 a.link {
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
background-color: rgba(119, 80, 21, 0.9);
}

.ejemplo-5:hover img {
transform: scale(10);
opacity: 0;
}
.ejemplo-5:hover .mascara {
opacity: 1;
}
.ejemplo-5:hover h2,
.ejemplo-5:hover p,
.ejemplo-5:hover a.link{
transform: scale(1);
opacity: 1;
}

Para ver el ejemplo AQUÍ

Para ver todos los ejemplos juntos AQUÍ

Comparte el post para descargar todos los archivos de los ejemplos