Para ocultar y revelar partes de una imagen proporcionalmente, puede utilizar técnicas de recorte y transición en CSS. Aquí hay un ejemplo básico de cómo puede lograr esto:
Ocultar y revelar partes de la imagen, código realizado con JSFiddle. Puede ingresar al siguiente enlace: https://jsfiddle.net/InaWeb/0s6zvyru/6/
En el ejemplo anterior podemos observar que:
.image-container es el contenedor que envuelve la imagen. Se establece position: relative, para que podamos posicionar absolutamente la imagen dentro de él. overflow: hidden; asegura que cualquier parte que se salga del contenedor no sea visible.
.image-container img establece que la imagen debe ocupar el 100% del ancho del contenedor. La propiedad transition agrega una animación suave al cambio de propiedades.
.image-container:hover img aplica un cambio en la propiedad transform cuando se realiza un hover sobre el contenedor. En este caso, la imagen se escala al 120%, pero puede ajustar este valor según tus preferencias.
Este es un ejemplo básico, y dependiendo de sus necesidades específicas, es posible que desee explorar otras técnicas, como el uso de máscaras CSS o incluso JavaScript para mayor control. La idea es usar las propiedades de CSS para manipular la visualización de la imagen en respuesta a las interacciones del usuario.