Ver a través de un objeto
La propiedad CSS clip-path permite definir trayectos para delimitar una zona que será visible, mientras el resto queda oculta. Esta propiedad admite animación y con un transtion adecuado podemos lograr interesantes efectos. En este se muestra un elemento con dos imágenes superpuestas: una de portada visible y otra que estaría como debajo y oculta, al pasar el ratón se aplica la propiedad clip-path para definir que parte es visible.
He usado un clip-path circulo por que se ajusta muy bien a la imagen, pero puedes usar inset (define un rectángulo), elipse, o un path svg.
Aprovechando este efecto mira la aplicación de lente de Rayos X en la web amiga de Javascript. Us lo mimso pero con moviminto y para simular como se ven los huesos de las manos con si estuvieran en una pantalla de Rayos X
Código HTML
La página de este ejemplo es tan solo un bloque contendor con otro dentro. Ambos van a tener una magen centrada. Tambiénpuede ponerse texto o texto e imágenes. Esto según como lo apliquéis
<div class="cubierta">
<img src="/como_se_hace/imgs/tierra.jpg" alt="tierra">
<div class="interior">
<img src="/como_se_hace/imgs/tierra-int.jpg" alt="interior">
</div>
</div>
Estilos CSS
Con las reglas de estilo hacemos que ambas imágenes queden centradas, como superpuestas, pero solo será visible una de ellas, la que está fuera del bloque con class="interior" (tierra).
En el bloque con clase patth tendremos la otra imagen que sería como el fondo que veremos a través de la imagen de cubierta (class="cubierta").
El efecto aparece al pasar el ratón por encima de la portada: un clip-path circular pasará de radio 0 inicial (cerrado, no se ve) al 50% (abierto) que permite ver a través de él. Este cambio se aplica con una transición para que sea un cambio gradual.
.cubierta{
display: block;
position:relative;
margin: 0 auto;
width: fit-content;
aspect-ratio: 1;
background: white;
overflow: hidden;
}
.interior{
position: absolute;
top:0;
left:0;
clip-path: circle(0%);
width: 100%;
height: 100%;
margin: 0 auto;
background: rgba(199,199,241,1);
opacity: 1;
overflow:hidden;
transition: clip-path 500ms;
}
.cubierta:hover .interior{
clip-path: circle(47%);
}
.cubierta, .interior{
display: flex;
justify-content: center;
align-items: center
}