4 Efectos mouse over con CSS / CSS3 para imágenes

junio 2, 2014

Hola, aca dejo algunos efectos mouse over para imágenes creados con CSS usado la psheudo clase hover.

Efecto up en la imagen creado con CSS:

Al pasar el ratón sobre la imagen, esta sube ligeramente conforme al resto. Ver Ejemplo

Código:

<div class="ex1" >
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>

img {
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.ex1 img:hover {
margin-top: 2px;
}

Efecto zoom en la imagen:

Al pasar el puntero sobre la imagen, esta se agranda a la vez que desplaza al resto a los lados. Ver Ejemplo

Código:

<div id="container">
<div class="ex2">
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>
</div>

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

Efecto giro

Este es un efecto de un giro parcial en el que se inclina ligeramente la imagen a la izquierda al pasar el puntero sobre ella. Ver Ejemplo

<div id="containerEx3">
<div class="ex3">
<img alt="img0" src="http: ../imagen0.jpg" />
<img alt="img1" src="http: ../imagen1.jpg" />
<img alt="img2" src="http: ../imagen2.jpg" />
<img alt="img3" src="http: ../imagen3.jpg" />
</div>
</div>

#containerEx3 {
width: 800px;
margin: 0 auto;
}
#ex3 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;
-ms-transition: all 0.5s ease;
}
#ex3 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}

Efecto texto deslizante junto a la imagen

En esta caso que al poner el mouse sobre la imagen, el efecto no es sobre esta, sino que sale un texto descriptivo a la derecha de la imagen y se desliza desde la parte superior. Aquí podemos poner tanto un titulo como un texto descriptivo. Ver Ejemplo

Código:

<div id="ex4" >
<img src="http:../imagen1.jpg">
<p>Some Text</p>
</div>

 
#ex4 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent; font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#ex4:hover {
line-height: 133px;
color: #575858;
}
#ex4 img{ float: left;
margin: 0 15px;
}

Las medidas de tiempo de las transiciones están en segundos 1s un segundo y 0.5s medio segundo, esto puedes codificarlo a tu antojo y según tus necesidades, también puedes añadir efectos de brillo o sombras en el mismo CSS que aparezcan o desaparezcan al poner el puntero sobre ellas.

ejem: en este caso aparcera la sombra al poner el ratón para el ex2

#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
/*** aquí va la sombra ***/
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
-ms-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}

Fuente: Presiona Aqui!