Comment - Icône de superposition d'image
Apprenez à créer un effet d'icône de superposition d'image au survol.
Icône de superposition d'image
Survolez l'image pour voir l'effet de superposition.
Comment créer une icône d'image de superposition
Étape 1) Ajoutez du HTML :
Exemple
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">
<a href="#"
class="icon" title="User Profile">
<i
class="fa fa-user"></i>
</a>
</div>
</div>
Étape 2) Ajoutez CSS :
Exemple
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
100%;
max-width: 400px;
}
/* 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;
top:
0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
/* When you mouse over the container, fade
in the overlay icon*/
.container:hover .overlay {
opacity: 1;
}
/*
The icon inside the overlay is positioned in
the middle vertically and horizontally */
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform:
translate(-50%, -50%);
text-align: center;
}
/* When you
move the mouse over the icon, change color */
.fa-user:hover {
color: #eee;
}
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.