Animar imagenes al pasar el mouse con jquery y jqueryrotate

Hola a todos en esta ocasión les traigo un pequeño efecto para imágenes que he visto en algunos sitios, el efecto consiste en cambiar de tamaño y hacer girar una imagen cuando se pasa el mouse sobre ella y cuando el mouse salga que regrese a su estado original, lo vamos a hacer con la librería jQuery y el plugin jQueryRotate.

Lo que vamos a utilizar:

Librería jQuery

  • Enlazar desde google:  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
  • Enlazar de forma local: Descargar del sitio  Jquery

Plugin jQueryRotate

jQuery

Comenzamos con la declaración $(document).ready.

Evento mouseenter

Asignamos al contenedor de la imagen el evento mouseenter dentro del cual pondremos el código para aumentar el tamaño a 250px de ancho y alto, como la imagen va a ir creciendo también animamos su posición left y top a -25 si no hacemos esto la imagen crecería hacia un lado. La siguiente linea es para indicar la rotacion que para este ejemplo será de 8 grados.

Evento mouseleave

Para que cuando el mouse salga de contenedor la imagen regrese a su posición original asignamos al contenedor el evento mouseleave y le indicamos que el ancho y alto de la imagen será de 200px, la posicion left y top sera 0 y la rotación regresara a su posición original utilizando el valor 0

$(document).ready(function(){
    $(".contenedor-imagen").mouseenter(function() {
        $(this).find('img').animate({width:250,height:250,left:-25,top:-25});
        $(this).find('img').rotate({animateTo:8});
    }).mouseleave(function() {
        $(this).find('img').animate({width:200,height:200,left:0,top:0});
        $(this).find('img').rotate({animateTo:0});
    });
});

HTML

Ahora solo nos queda armar la estructura HTML que contendrá a las imágenes

</pre>
<div class="contenedor-imagen"><img src="imagen1.jpg" alt="Imagen" /></div>
<div class="contenedor-imagen"><img src="imagen2.jpg" alt="Imagen" /></div>
<pre>

CSS

Para darle un poco de presentación a nuestro ejemplo le podemos agregar las siguientes reglas CSS

.contenedor-imagen{
    width:180px;
    height:180px;
    float:left;
    overflow:hidden;
    border:1px solid #ddd;
    margin:15px;
    border: 1px solid #ddd;
    text-align:center;
}

.contenedor-imagen img{
    position: relative;
}

Aqui les dejo el link del demo


Si el contenido les fue de utilidad recomienden el blog, saludos y hasta luego.

Deja un comentario