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

css svg
actualizado: 13 / 04 / 2023

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="container">
<div class="item">
<img src="imagen.png" alt="Descripción de imagen" />
<h2>Título del elemento</h2>
<p>Descripción detallada del elemento</p>
</div>
</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
.container {
display: flex;
justify-content: center;
align-items: center;
}
.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;
}
.item h2 {
margin-top: 16px;
margin-bottom: 8px;
font-size: 20px;
font-weight: bold;
}
.item p {
margin: 0;
font-size: 16px;
}

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(1.1);
}

Aquí estamos utilizando la propiedad transform: scale() para aumentar el tamaño de la imagen en un 10% 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.

Artículos relacionados:
Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Imagen destacada del artículo Cómo utilizar negrita en CSS: Aprende a resaltar tu contenido

Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Imagen destacada del artículo Cómo hacer una tienda online con HTML y CSS: Una guía paso a paso

Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

Imagen destacada del artículo Colores en html: cómo utilizar los formatos RGB, hexadecimal y HSL

SEO para Programadores: Consejos y Herramientas Esenciales

Imagen destacada del artículo SEO para Programadores: Consejos y Herramientas Esenciales

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

CodeGPT: ChatGPT dentro de vscode

Imagen destacada del artículo CodeGPT: ChatGPT dentro de vscode

Cursor en css: personalizar el puntero del mouse

Imagen destacada del artículo Cursor en css: personalizar el puntero del mouse