Hover Zoom sobre Imagen
Este efecto puedes haberlo visto en imágenes usadas en enlaces: al pasar el ratón la imagen crece, se oscurece y sobre ella aparece un texto invitando a pulsar para ampliar información o para ir a algún otro lugar.
Lo puedes probar pasando el ratón por la imagen que acompaña esta página, el enlace apunta a esta misma página.
Como ves la imagen crece dentro de su bloque, es como verla por una ventana: la imagen aumenta pero la ventana no. Al mismo tiempo se muestra un texto y una capa translucida que oscurece la imagen.
El código HTML
Es muy simple: una capa div conteniendo el enlace con la imagen. Al bloque el asignamos la clase imgzoom, que describimos luego en el código CSS.
<div class="imgzoom">
<a href="destion.htm">
<img src="/como_se_hace/imgs/cards0-img.jpg" alt="texto descriptivo">
</a>
</div>
<p>Y por aquí el resto de la página</p>
Estilo css
El efecto se basa en el uso de los pseudo selectores CSS :after y :before, que permiten añadir un elemento html desde las reglas de estilo. Solo pueden añadir texto, pero es suficiente.
Se añadirá una capa con color oscuro y no totalmente opaca y un texto para el llamameinto a hacer click situado en la parte central. Esto se hace con posicionamientos absolutos usando como referencia el bloque con posicion relative donde se coloca el enlace con la imagen.
Por su parte la imagen se hace crecer, pero manteniéndola dentro del bloque div, con lo que no se altera el resto de la página.
.imgzoom{
position:relative;
width:fit-content;
height:fit-content;
overflow:hidden;
}
.imgzoom:before{
content:'';
position:absolute;
top:0;
left:0;
background-color: #000000;
width:100%;
height:100%;
opacity:0;
transition:opacity 500ms;
z-index:100;
}
.imgzoom:hover:before{
opacity:0.4;
}
.imgzoom:after{
content:"Seguir leyendo";
position:absolute;
display:block;
width:100%;
top:50%;
text-align:center;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 1.5rem;
color: white;
opacity:0;
transition:opacity 500ms;
z-index: 200;
}
.imgzoom:hover:after{
opacity:1;
}
.imgzoom img{
transform: scale(1);
transition: transform 1000ms;
z-index:0;
}
.imgzoom:hover img{
transform: scale(1.2);
}
.imgzoom a:after{
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 300;
}
La base es el marco o contenedor con clase imgzoom, con ella ajustamos el tamaño al contendio (a la imagen), la position: relative permite que el resto de contendio con posición absoluta tenga este marco como referencia.
El marco principal tiene dos bloques uno antes (:before) y otro posterior (:after). El primero define la capa oscura que cubre a la imagen, la opacidad 0 la hace transparente y le colocamos un transition para que esta propiedad cambie de forma gradual. Cuando el ratón pase por encima (:hover) la capa se hace más opaca. Esta cambio es gradual gracias a transition
El bloque after es el responsable del texto central que llama a clickar en la imagen para seguir un vínculo. El mismo mecanismo: inciialmente se le pone opacidad 0 para que no se vea y luego se pasa a 1 para que sea totalmente visible.
La imagen se ampllia aplicando la propiedad scale, como su cntendor tiene overwrite:hidden, al expandir la imagen no se sale del marco que la contiene, es como mirarla a través de una ventana. Lo mismo que los demás efectos, este zoom se produce de forma gradual gracias a la propiedad transition.
El último :after afecta al link, es la forma que el contenedor del enlace sea también activo, es decir, que el bloque div que contiene al elemento <a></a> se comporte como un link.