CSS3: Efectos hover para imágenes

por Daniel Ernesto Manchego Rivas | Mar 24, 2015 | CSS, Diseño, html | 5 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 <div class="contenedor-img">
2 <img src="imgejemplo.jpg" alt="" />
3 <div class="mascara">
 4 <h2>Ejemplo</h2>
5 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendiss
6 malesuada.</p>
7 <a class="link" href="#">Leer mas</a>
8 </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 /*Estilos Base*/
2 .contenedor-img {
3 width: 300px;
4 height: 200px;
5 float: left;
6 overflow: hidden;
7 position: relative;
8 text-align: center;
9 cursor: default;
10 background: #fff;
11 }
12 .contenedor-img .mascara,.contenedor-img .contenido {
13 width: 300px;
14 height: 200px;
15 position: absolute;
16 overflow: hidden;
17 top: 0;
18 left: 0
19 }
20 .contenedor-img img {
21 display: block;
22 position: relative;
23
24 }
25 .contenedor-img h2 {
26 text-transform: uppercase;
27 color: #fff;
28 text-align: center;
29 position: relative;
 30 font-size: 17px;
31 padding: 10px;
32 background: rgba(0, 0, 0, 0.9);
33 margin: 20px 0 0 0
34 }
35 .contenedor-img p {
36 font-size: 12px;
37 position: relative;
38 color: #fff;
39 padding: 10px 20px 10px;
40 text-align: center
41 }
42 .contenedor-img a.link {
43 display: inline-block;
44 text-decoration: none;
45 padding: 7px 14px;
46 background: #222;
47 color: #fff;
48 text-transform: uppercase;
49 box-shadow: 0 0 1px #000
50 }
51 .contenedor-img a.link:hover {
52 box-shadow: 0 0 5px #000
53 }

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.