Para hacer un efecto de zoom al pasar el mouse (hover) en CSS, puedes usar la propiedad transform con el valor scale. El siguiente es un ejemplo de cómo se puede hacer:
```css
.img-zoom {
width: 300px;
height: 200px;
overflow: hidden;
}
.img-zoom:hover {
overflow: hidden;
}
.img-zoom img {
width: 100%;
height: auto;
transition: transform .3s ease;
}
.img-zoom:hover img {
transform: scale(1.1);
}
```
En este código, `.img-zoom` es la clase CSS que estás aplicando al elemento que desees tener el efecto de zoom (usualmente una imagen).
Siguiendo este ejemplo, al pasar el mouse por encima de la imagen, esta crecerá o “hará zoom” al 110% de su tamaño normal, logrando un efecto “zoom in”. El tiempo que toma la transformación es de .3 segundos y se hace de forma gradual gracias a la función de tiempo `ease`.
Es importante destacar que el valor de `scale(1.1)` puede ser alterado para conseguir el nivel de zoom deseado. Si quisieras que el zoom fuera menor, podrías usar `scale(1.05)` para hacerlo un 105% de su tamaño original, o `scale(2)` para duplicar su tamaño.
Recuerda que el contenedor de la imagen no cambia de tamaño, por lo que si la imagen crece, parte de ésta puede quedar oculta. Si no quieres que se corte parte de la imagen, puedes remover la propiedad `overflow: hidden;`.
