Créer un hovered avec CSS

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

1ère étape

Dans cette première étape, nous allons commencer par afficher une image :

<img src="logo-believemy.png" alt="Logo" />

2ème étape

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%;
}

3ème étape

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.

4ème étape

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.

5ème étape

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 !