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

Nuestros Servicios

Sistemas & Aplicaciones

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;
}