Comment - Zoom de superposition d'image
Apprenez à créer un effet de zoom de superposition d'image au survol.
Survol d'image Zoom plein écran
Survolez l'image pour voir l'effet de zoom.
Comment créer un effet de zoom superposé
Étape 1) Ajoutez du HTML :
Exemple
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<div
class="text">Hello World</div>
</div>
</div>
Étape 2) Ajoutez CSS :
Exemple
/* 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;
}
Conseil : consultez également d'autres effets de superposition d'image (fondu, glissement, etc.) dans notre tutoriel - Image Hover Overlay .
Accédez à notre didacticiel sur les images CSS pour en savoir plus sur la façon de styliser les images.