Cómo - Zoom de superposición de imagen
Aprenda a crear un efecto de zoom de superposición de imagen al pasar el mouse.
Zoom de pantalla completa de desplazamiento de imagen
Pase el cursor sobre la imagen para ver el efecto de zoom.
Cómo crear un efecto de zoom superpuesto
Paso 1) Agregar HTML:
Ejemplo
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<div
class="text">Hello World</div>
</div>
</div>
Paso 2) Agregar CSS:
Ejemplo
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width: 50%;
}
/* Make the image to responsive */
.image {
width: 100%;
height: auto;
}
/*
The overlay effect (full height and width) - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
left: 0;
right:
0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 100%;
transform: scale(0);
transition: .3s ease;
}
/* When you mouse over the container, the
overlay text will "zoom" in display */
.container:hover .overlay {
transform:
scale(1);
}
/* Some text inside the overlay, which is positioned in
the middle vertically and horizontally */
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Sugerencia: vea también otros efectos de superposición de imágenes (desvanecimiento, deslizamiento, etc.) en nuestro Cómo - Superposición de desplazamiento de imagen .
Vaya a nuestro tutorial de imágenes CSS para obtener más información sobre cómo diseñar imágenes.