Cómo añadir un efecto de zoom a una imagen al pasar por encima con el cursor

Existen muchos plugins para insertar efectos especiales a las imágenes cuando se les pasa el cursor por encima. Todos esos plugins añaden un montón de código a la página, que terminan afectando a la velocidad de la web en sí. Si quieres utilizar muy poco código para así optimizar la carga de tu web, nuestro script para generar un efecto de zoom es perfecto para ti.

Agrandar la imagen cuando el usuario pasa por encima con el cursor genera una mejor experiencia de navegación en el usuario de cualquier aplicación. Puedes añadir fácilmente este efecto de zoom a una imagen con el evento hover de jQuery y con un pelín de CSS. En este tutorial veremos un sencillo snippet de código para añadir un efecto de zoom a una imagen mediante jQuery y CSS.

Código CSS

En el siguiente código CSS, los estilos están definidos en dos clases (.zoom y .transition). Utilizamos el estilo zoom cuando la imagen está cargada y la clase transition cuando el ratón se pose encima.

img.zoom {
    width: 350px;
    height: 200px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}
 
.transition {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}

Código Javascript

Para utilizar jQuery, necesitamos incluir su librería.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Utilizaremos el evento hover para añadir y eliminar la clase transition basándonos en si el cursor se ha posicionado encima de la imagen.

<script>
$(document).ready(function(){
    $('.zoom').hover(function() {
        $(this).addClass('transition');
    }, function() {
        $(this).removeClass('transition');
    });
});
</script>

Código HTML

Añade la clase zoom a la imagen en la que quieras añadir el efecto zoom al pasar el cursor por encima.

<img src="images/programacionnet.jpg" class="zoom"/>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.