CSS3: Efectos hover para imágenes

por | Mar 24, 2015 | CSS, Diseño, html | 8 Comentarios

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Í

[social-download button_id=»a8357ad76c6889d3f» dl_id=»http://www.miguelmanchego.com/samples/2015/hovereffects/hovereffects.zip» theme=»blue» message=»Comparte el post para descargar todos los archivos de los ejemplos» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=» @xlogus» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]

8 Comentarios

  1. Miguel
    Miguel el noviembre 10, 2015 a las 4:05 pm

    Hola,
    antes que nada quiero felicitarte por tu trabajo, que me está siendo de gran ayuda. Y ahora, una duda que me ha surgido, ¿sería posible hacer el mismo efecto sobre un div que contenga texto además de la imagen? Lo estoy intentando pero no me sale. Cuando añado texto, si lo pongo sin formato no hay problema pero, cuando lo meto entre etiquetas «h2», por ejemplo, la imagen desaparece y forma parte de la máscara… no sé si me explico… Vamos, que me gustaría poder aplicar ese efecto pero con algo más que una imagen.

  2. Miguel
    Miguel el noviembre 20, 2015 a las 11:06 am

    Vale, ya no es necesario que me ayudéis, ya lo he conseguido.

  3. Umiki Zatoichi
    Umiki Zatoichi el noviembre 23, 2015 a las 3:18 pm

    Muchas gracias!

  4. Carlos Marin C
    Carlos Marin C el noviembre 23, 2015 a las 9:33 pm

    Hola Miguel, me gustaron tus ejemplos; explicacion sencilla, clara, puntual, y los efectos son dinamicos y elegantes, estoy empezando en esto de la WEB, de hecho me estoy preparando porque debo dar una capacitación a unos jovenes sobre HTML con CSS. Quisiera tener la libertad de poder realizarte algunas consultas. Gracias

  6. Karen
    Karen el mayo 6, 2016 a las 7:49 pm

    No se si me pasa solo ami, pero la imagen me queda por un lado y la mascara por otro.

  7. Ruben
    Ruben el octubre 16, 2016 a las 1:39 pm

    Hola, estoy probando el primer efecto pero no me queda claro si hay que copiar todo el codigo de los tres casilleros que pones en cada ejemplo y pegarlos todos juntos en mi plantilla, he probado pero no me funciona el efecto solo aparece «ejemplo 1» el texto «lorem ipsum», me podrias explicar bien como tengo que hacer, gracias.

  8. Carlos Cruz Ortiz
    Carlos Cruz Ortiz el octubre 23, 2016 a las 8:22 pm

    Hola Miguel, tu información me resultó muy valiosa, funciona muy bien en chrome en android y en windows, pero en IOS nomás no funciona la animación. Tienes alguna idea de cómo solucionarlo.

Trackbacks/Pingbacks

  1. Laboratoria - leslieabi | Pearltrees - […] Un formulario de contacto gratuito para su sitio web - Foxyform.com. Psginas sobre html y css. Fuentes. Paginas de…