Agrandar imagenes al pasar el cursor sobre ellas

Como podemos agrandar una imagen al pasar el cursor?

Vamos a hablaros de como podemos hacer que una imagen de nuestro blog se muestre mas grande cuando pasamos el ratón por encima.


Para ello a la hora de editar nuestro post en la sección de HTML, debemos de poner este código.

<img src="URL De la imagen" onmouseover="this.width=500;this.height=500;" onmouseout="this.width=400;this.height=400;" width="300" height="300" alt="" />

Aquí te explico las secciones paso a paso:

width=500: Ancho de la imagen original.

height=500: Altura de la imagen original.

width=400: Ancho de la imagen que quieres que quede después de pasarle el mouse (Se recomienda el mismo tamaño que la imagen miniatura).

height=400: Altura de la imagen que quieres que quede después de pasarle el mouse (Se recomienda el mismo tamaño que la imagen miniatura).

width="300": Ancho de la imagen en miniatura.

height="300": Altura de la imagen en miniatura.

Nota:
Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.

Puedes ver en este post como lo hacemos paso a paso