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:
- <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):
Espero que os sea de utilidad, si tenéis dudas, consultar.
Un saludo.
