Ocultar y revelar partes de la imagen
El siguiente cógido permite ocultar y revelar partes de la imagen proporcionalmente
by InaWeb
HTML
<div class="image-container">
<img src="https://fastly.picsum.photos/id/43/1280/831.jpg?hmac=glK-rQ0ppFClW-lvjk9FqEWKog07XkOxJf6Xg_cU9LI" alt="Descripción de la imagen" width="1280px" heigth="831px">
</div>
CSS
.image-container {
position: relative;
overflow: hidden;
width: 300px; /* ajusta el ancho según tus necesidades */
height: 200px; /* ajusta la altura según tus necesidades */
}
.image-container img {
width: 100%;
height: auto;
transition: transform 0.5s; /* Agrega una transición suave */
}
.image-container:hover img {
transform: scale(1.2); /* Ajusta la escala según tus necesidades */
}