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