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».
Códigos a utilizar
HTML
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 |
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.
CSS
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.
Usaremos la siguiente estructura, la cual es solo agregar la clase «ejemplo-1» al contenedor:
1 2 3 4 5 6 7 8 |
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 el resultado, clic a la DEMO de pié de página.
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.
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 el resultado, clic a la DEMO de pié de página.
Ejemplo 3
Para este ejemplo haremos el efecto de la máscara empujando a la imagen.
Usaremos la siguiente estructura, la cual es solo agregar la clase «ejemplo-3» al contenedor:
1 2 3 4 5 6 7 8 |
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 resultado, clic a la DEMO de pié de página.
Ejemplo 4
En este ejemplo haremos zoom-out a la imagen y la máscara entrara girando 180grados.
Usaremos el siguiente html:
1 2 3 4 5 6 7 8 |
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 |
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 resultado, clic a la DEMO de pié de página.
Ejemplo 5
En este ejemplo haremos zoom con fade el cual dará el efecto de que la imagen se transforma en la máscara.
El html a usar:
1 2 3 4 5 6 7 8 |
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; } |
Clic a la DEMO para ver los ejemplos: AQUÍ
Bibliografía
https://www.miguelmanchego.com/