¿Cómo crear el efecto zoom en css para una imagen?

Actualizado : 2023-10-29

El efecto zoom es una técnica popular en diseño web que permite resaltar elementos clave en la página al aplicar un aumento de escala cuando se pasa el cursor sobre ellos. En este artículo, exploraremos cómo implementar este efecto utilizando solamente CSS.

HTML básico

Antes de comenzar con el estilo, necesitamos tener el HTML básico en su lugar. Lo mejor es usar una estructura simple como la siguiente:

html

<div class="item">
  <img src="imagen.png" alt="Descripción de imagen" />
</div>

Aquí, hemos envuelto todo el contenido en un div contenedor y le hemos dado una clase para poder estilizarlo fácilmente. Dentro del contenedor, tenemos un elemento individual que contiene una imagen, un título y una descripción. Este sería el elemento que queremos animar con el efecto zoom.

Estilo básico

Para lograr el efecto zoom, debemos aplicar una transformación CSS en el elemento cuando se coloca el cursor sobre él. Para hacer esto, primero necesitamos establecer las propiedades CSS iniciales para el elemento:

css

.item {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  margin: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

Aquí hemos creado un estilo básico para el elemento que queremos animar con el efecto zoom. Hemos establecido algunos estilos comunes como ancho, altura, sombra de caja y borde redondeado para darle al elemento una apariencia atractiva.

Agregar el efecto de zoom

Para agregar el efecto de zoom, necesitamos aplicar una transformación CSS en la imagen cuando se coloca el cursor sobre ella. Para hacer esto, podemos usar el pseudo-selector :hover para aplicar el estilo solo cuando se coloca el cursor sobre la imagen. Agreguemos el siguiente código CSS debajo del estilo base:

css

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

Aquí estamos utilizando la propiedad transform: scale() para aumentar el tamaño de la imagen en un 100% cuando se coloca el cursor sobre ella. Esto crea el efecto de zoom que estábamos buscando.

Usando los estilos y técnicas descritas aquí, puede agregar fácilmente el efecto de zoom a su propia página web y mejorar la experiencia del usuario al resaltar los elementos importantes.

Ejemplo de efecto zoom sobre una imagen en css

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi