Dans ce premier article de l'histoire de BELIEVEMY, voyons ensemble comment créer un hovered : un texte qui apparaît au survol de la souris sur une image !
Vous pouvez retrouver l'ensemble de ce tutoriel sur notre compte Instagram
Dans cette première étape, nous allons commencer par afficher une image :
<img src="logo-believemy.png" alt="Logo" />
Recadrer et englober l'image dans un div :
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
</div>
Et du côté du CSS :
.container {
position: relative;
width: 500px;
}
.container img {
width: 100%;
}
Ajouter le texte à afficher :
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
<!-- Texte à afficher -->
<div class="hovered">Hello World !</div>
</div>
Et du côté du CSS :
.hovered {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%; width: 100%;
opacity: 0; transition: all .3s;
background-color: #3f3f44;
}
Ici, on passe l'overlay en position absolute pour bien le placer et on cache de base celui-ci en mettant son opacité à 0.
Les propriétés top, bottom, left et right permettent de lui faire prendre tout l'espace.
Faire apparaître l'overlay au passage de la souris sur l'image, et tout ça uniquement avec CSS.
.container:hover .hovered {
opacity: 1;
}
Lorsque la souris passe sur la classe container (donc sur l'image), on passe l'opacité de notre classe overlay à 1, pour afficher son contenu.
On centre le texte de l'overlay en englobant le texte dans une balise span pour mieux le sélectionner avec CSS.
<div class="container">
<!-- Image -->
<img src="logo-believemy.png" alt="Logo" />
<!-- Texte à afficher -->
<div class="hovered">
<span>Hello World !</span>
</div>
</div>
Pour finir, on sélectionne la balise span dans la classe overlay et on centre tout !
.hovered span {
color: white;
font-size: 5rem;
position: absolute;
top: 50%;
left: 50%;
font-family: arial;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Et nous voici avec un superbe hovered !
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.