miércoles, 4 de abril de 2018

Al pasar el ratón la imagen se agranda

Hoy os traigo un efecto visual que al pasar el ratón por encima de una imagen, está se hace más grande.




El código es muy sencillo, lo haríamos de la siguiente manera:


  1. <img src="aquí la url de la imagen" onmouseover="this.width=x0;this.height=x0;" onmouseout="this.width=x1;this.height=x1;" width="x2" height="x2" alt="agrandar imagen al pasar el ratón" /> 

Pondremos el ancho(width) y el alto(height) de la imagen a nuestro gusto, modificaremos los siguientes parámetros:

x0 = pondremos los px de imagen, tanto ancho como alto, este será el tamaño de imagen cuando esté el ratón encima.

x1 = pondremos los px de la imagen para cuando salgamos con el ratón fuera de la imagen.

x2 = pondremos los px de la imagen que se mostrará en primer lugar.



Y se veía así(Lo he exagerado para que se aprecie bien el cambio):



agrandar imagen al pasar el raton




Espero que os sea de utilidad, si tenéis dudas, consultar.


Un saludo.

No hay comentarios:

Publicar un comentario

Para insertar código html en tu comentario,convertir aquí