CSS - Overlay : Un guide pour débutants pour créer des effets web dynamiques
Bonjour à tous, futurs superstars du design web ! Aujourd'hui, nous allons plonger dans le monde fascinant des overlays CSS. Ne vous inquiétez pas si vous êtes nouveau dedans - je me souviens de ma première fois en apprenant sur les overlays, et je vous promets que vous trouverez cela à la fois amusant et gratifiant. Alors, embarquons dans cette aventure ensemble !
Qu'est-ce qu'un Overlay CSS ?
Avant de nous lancer dans le code, comprenons ce qu'est un overlay. Imaginez que vous regardez une belle peinture, et soudain, quelqu'un place une feuille transparente par-dessus avec du texte. C'est essentiellement ce que fait un overlay sur un site web - il ajoute une couche supplémentaire sur le contenu existant, souvent pour fournir des informations supplémentaires ou créer des effets visuels.
Exemple de Base d'Overlay CSS
Commençons par un exemple simple d'overlay. Voici le code HTML et CSS :
<div class="container">
<img src="cute-puppy.jpg" alt="Un adorable chiot">
<div class="overlay">
<div class="text">Bonjour, je suis un chiot !</div>
</div>
</div>.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}Reprenons cela :
- Nous avons un conteneur avec une image et un div overlay.
- L'overlay est positionné绝对ement à l'intérieur du conteneur.
- Initialement, l'overlay a une opacité de 0 (invisible).
- Lorsque nous survolons le conteneur, l'opacité de l'overlay change pour 1 (entièrement visible).
- Le texte est centré à l'intérieur de l'overlay.
Overlay CSS - Effet de Glissement de Haut en Bas
Maintenant, rendons les choses plus intéressantes avec un effet de glissement ! Voici comment nous pouvons modifier notre CSS pour faire glisser l'overlay de haut en bas :
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: 0.5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}Dans cet exemple, l'overlay commence au-dessus de l'image (bottom: 100%) sans hauteur. Lors du survol, il glisse vers le bas pour couvrir l'image entière.
Overlay CSS - Effet de Glissement de Bas en Haut
Et si nous voulions que l'overlay glisse vers le haut ? Facile comme bonjour ! Il suffit de changer quelques lignes :
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 100%;
height: 0;
transition: 0.5s ease;
}
.container:hover .overlay {
height: 100%;
}Maintenant, l'overlay commence en bas et s'étend vers le haut lors du survol.
Overlay CSS - Effet de Glissement de Gauche à Droite
Changeons de cap et faisons glisser notre overlay de gauche à droite :
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 100%;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.container:hover .overlay {
width: 100%;
right: 0;
}Ici, l'overlay commence sans largeur sur le côté gauche et s'étend à pleine largeur lors du survol.
Overlay CSS - Effet de Glissement de Droite à Gauche
Et bien sûr, nous pouvons le faire glisser de droite à gauche aussi :
.overlay {
position: absolute;
bottom: 0;
left: 100%;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.container:hover .overlay {
width: 100%;
left: 0;
}Cette fois, l'overlay commence sur la droite et glisse vers la gauche lors du survol.
Overlay CSS - Effet de Fading
Souvenez-vous de notre premier exemple ? C'était en fait un effet de fondu ! Mais rendons-le encore plus lisse :
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}Cela crée un effet de fondu en douceur lors du survol de l'image.
Overlay CSS - Overlay de Titre d'Image
Créons un overlay qui affiche le titre de l'image lors du survol :
<div class="container">
<img src="cute-puppy.jpg" alt="Un adorable chiot" class="image">
<div class="overlay">
<div class="title">Chiot Adorable</div>
</div>
</div>.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
transition: 0.5s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}Cela crée un overlay de titre qui apparaît desde le bas de l'image lors du survol.
Overlay CSS - Overlay d'Icone
Maintenant, ajoutons un overlay d'icône à notre image :
<div class="container">
<img src="cute-puppy.jpg" alt="Un adorable chiot" class="image">
<div class="overlay">
<a href="#" class="icon" title="Profil Utilisateur">
<i class="fa fa-user"></i>
</a>
</div>
</div>.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}
.container:hover .overlay {
opacity: 1;
}
.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.fa-user:hover {
color: #eee;
}Cela crée un overlay d'icône qui apparaît au centre de l'image lors du survol.
Propriétés Connexes pour les Overlays CSS
Voici un tableau des propriétés couramment utilisées avec les overlays CSS :
| Propriété | Description |
|---|---|
| position | Définit la méthode de positionnement |
| top, bottom, left, right | Spécifie la position de l'overlay |
| width, height | Définit les dimensions de l'overlay |
| opacity | Contrôle la transparence de l'overlay |
| transition | Définit comment l'overlay apparaît/disparaît |
| background-color | Définit la couleur de l'overlay |
| z-index | Contrôle l'ordre d'empilage des éléments |
Et voilà, amis ! Vous venez d'apprendre les bases des overlays CSS. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces exemples. Qui sait ? Vous pourriez créer la prochaine grande tendance en design web ! Bon codage, et puissent vos overlays toujours être lisses et vos transitions toujours être fluides !
Credits: Image by storyset