Haga clic o coloque el cursor sobre la imagen para ampliar en HTML

Este artículo nos enseñará a ampliar la imagen HTML cuando el usuario hace clic o pasa el cursor sobre una imagen en particular.

Como usuario de una galería de imágenes, habrá visto la interfaz en la que residen varias imágenes y, al pasar el cursor sobre una sola imagen, esta se amplía. En este artículo aprenderemos diferentes métodos para ampliar imágenes al pasar el cursor por encima o al hacer clic en ellas.

Cambiar el tamaño de la imagen HTML al pasar el cursor

Podemos ampliar una imagen en particular usando HTML y CSS cuando el usuario pasa el cursor sobre ella. En el siguiente ejemplo, hemos creado cinco elementos img con diferentes valores del atributo src. Todas las imágenes se mostrarán en línea en la misma fila.

También hemos usado estilos CSS para establecer la altura y la anchura de cada elemento de imagen: una altura y una anchura de 200px para cada elemento, y un margen de 10px para cada elemento img para dejar espacio alrededor de la imagen.

Usamos la pseudoclase CSS :hover para añadir el efecto al pasar el cursor. Dentro del bloque img:hover, establecemos una altura y una anchura de 400px para el elemento de imagen, lo que significa que cada vez que el usuario pase el cursor sobre la imagen, esta se escalará 2x.

Código de ejemplo:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

En la salida anterior, los usuarios pueden ver que cuando pasamos el cursor sobre cualquier imagen, el tamaño de esa imagen aumenta.

También podemos usar la propiedad CSS transform para ampliar la imagen HTML. La propiedad transform nos permite transformar cualquier elemento HTML — escalarlo, rotarlo, trasladarlo, etc. — y una imagen es uno de ellos. Aquí aplicaremos el escalado para ampliar la imagen.

En el siguiente código de ejemplo, añadimos el estilo CSS transform: scale(2) dentro del bloque img:hover. Multiplica la altura y la anchura de la imagen por 2 cuando el usuario pasa el cursor sobre la imagen. La función transform: scale(factor) toma un único parámetro, el factor: el elemento crece según ese factor, por lo que el valor 2 amplía la imagen 2x.

Código de ejemplo:

img:hover{
    transform:scale(2);
}

Usar HTML y JavaScript para ampliar la imagen cuando el usuario hace clic en ella

Podemos usar HTML y JavaScript para ampliar la imagen cuando el usuario hace clic en ella. En este ejemplo, hemos creado cinco imágenes HTML y establecido la height y la width de cada elemento img como atributos.

En JavaScript, accedemos a todos los elementos img por su nombre de etiqueta y los almacenamos en la variable images. Después recorremos las imágenes y adjuntamos un controlador de clic a cada una con el método addEventListener, que toma dos argumentos: el tipo de evento (aquí, click) y la función de devolución de llamada que se ejecuta cada vez que el usuario hace clic en esa imagen.

Dentro de la devolución de llamada, recorremos de nuevo la matriz images y restablecemos cada imagen excepto la que recibió el clic — transform de vuelta a scale(1) y el margen adicional eliminado — para que solo una imagen esté ampliada a la vez. Después establecemos el estilo transform de la imagen pulsada en scale(1.3) mediante this.style.transform y le damos un margen de 40px para un mejor aspecto.

Tenga en cuenta que la variable del bucle se declara con let: con var, todos los controladores compartirían el valor final del índice del bucle, y el restablecimiento ya no respetaría la imagen pulsada.

Código de ejemplo:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>

var images = document.getElementsByTagName('img');
for (let i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    for (var j = 0; j < images.length; j++) {
      if (i != j) {
        images[j].style.transform = 'scale(1)';
        images[j].style.margin = '';
      }
    }
    this.style.transform = 'scale(1.3)';
    this.style.margin = '40px';
  });
}

Salida:

En la salida anterior, los usuarios pueden observar que cuando hacemos clic en una imagen, esta se amplía y las demás imágenes vuelven a su tamaño original. No hay ningún efecto cuando pasamos el cursor sobre una imagen.

Conclusión

Hemos aprendido tres métodos diferentes para ampliar imágenes en este artículo. Los dos primeros métodos usan la pseudoclase CSS :hover — adecuados para galerías donde basta una vista previa rápida al pasar el cursor — y el tercero usa el método addEventListener de JavaScript, que conviene a una interacción deliberada de clic para ampliar en la que solo una imagen permanece ampliada a la vez.