CSS: Efectos hover

Design Shack nos muestra 5 ejemplos de efectos hover, listos para usar.

1.- Bump Up usa transiciones para darle un poco de suavidad cuando se levanta la imagen, pero no es necesario.

Clic aquí para mostrar u ocultar el código

css:

.ex1 {
   text-align:center;
   width: 100%;
}
.ex1 img{
    border: 5px solid #ccc;
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}
.ex1 img:hover { margin-top: 2px;} 

uso:

<div class="ex1">
// aquí tus imágenes
</div>

---

2.- Stack & Grow similar al anterior pero usando las imágenes de manera vertical, el efecto se consigue cambiando las dimensiones de la imagen al colocar o retirar el mouse sobre ella.

Clic aquí para mostrar u ocultar el contenido

css:

#containerEx2 {
 margin: 0 auto;
 width:300px;
}
#ex2 img{
    height: 100px;
    width: 300px;
    margin: 15px 0;
     -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}
#ex2 img:hover {
 height: 133px;
 width: 400px;
 margin-left: -50px;
}

uso:

<div id="containerEx2">
<div id="ex2">
  // aquí tus imágenes
</div>
</div>

---

3.- Fade Text in consiste en jugar con la propiedad line-height y color.

Clic aquí para mostrar u ocultar el contenido

css:

#ex3 {
 line-height: 0px;
 color: transparent;
 font-size: 25px;
 font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: 150;
 text-transform: uppercase;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
} 
#ex3:hover {
 line-height: 50px;
 color: #575858;
}
#ex3 img{
 float: left;
 margin: 0 5px;
}

uso:

<div id="ex3">
<img src="imagen.jpg"><p>texto de la imagen..</p>
</div>

---

4.- Crooked Photo usa css3 transform para conseguir el efecto (rotar/rotate).

Clic aquí para mostrar u ocultar el contenido

css:

#ex4 {
 width: 800px;
 margin: 0 auto;
}
#ex4 img {
 margin: 20px;
 border: 5px solid #eee;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
}
#ex4 img:hover {
 -webkit-transform: rotate(-7deg);
 -moz-transform: rotate(-7deg);
 -o-transform: rotate(-7deg);
}

uso:

<div id="ex4">
  // aquí tus imágenes
</div>

---

5.- Fade In and Reflect es el que más interesante me ha resultado, utiliza la propiedad -webkit-box-reflect para conseguir el efecto de reflejo, mientras que para conseguir iluminar el borde de la imagen suavemente, un poco de sombras y transiciones..

Clic aquí para mostrar u ocultar el código

css:

#ex5 {
 width: 700px;
 margin: 0 auto;
 min-height: 200px;
}
#ex5 img {
 margin: 25px;
 opacity: 0.8;
 border: 10px solid #eee;
 
 /*Transition*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 
 /*Reflection*/
 -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {  
   opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, 
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

uso:

<div id="ex5">
  // aquí tu imagen
</div>

---

Referencia:
Design Shack