Les effets de survol d’image peuvent ajouter une touche de raffinement à votre site web. Ils créent un effet de fluidité qui rend les galeries d’images ou les carrousels plus agréables à parcourir. Le plus intéressant, c’est que vous pouvez créer ces effets avec seulement du CSS et pas de JavaScript.
Vous pouvez créer différents styles d’animation sur vos images. Il s’agit notamment de rendre l’arrière-plan flou ou de l’agrandir, d’estomper ou de faire glisser le texte et de changer la couleur de l’arrière-plan.
Création du code HTML pour les images
Commencez par créer un index.html dans un dossier vide de votre ordinateur, puis ouvrez le fichier avec un éditeur de texte. Dans le fichier, créez le squelette HTML et ajoutez les balises suivantes à l’intérieur des balises d’ouverture et de fermeture :
<div class="grid">
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=1" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="zoom blur" src="https://picsum.photos/500?random=2" alt="">
<div class="content fade">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="blur" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
<div class="image-wrapper">
<img class="grey" src="https://picsum.photos/500?random=3" alt="">
<div class="content slide-left">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
</div>
</div>
</div>
Il s’agit d’un conteneur de grille avec quatre enveloppes d’image. Les éléments div avec les balises image-wrapper servent d’enveloppe à l’image et au texte correspondant. Un ensemble unique de classes est ajouté à l’image et au contenu de chaque section.
Dans la feuille de style, vous ciblerez ces éléments par leur nom de classe et appliquerez les différents effets de style et d’animation. Le texte ne s’affichera pas par défaut ; il ne s’affichera qu’au survol de l’enveloppe de l’image, et l’image subira différents effets au cours du processus.
Ajout de CSS de base
Maintenant que vous avez créé le code HTML, il est temps de le styliser à l’aide de CSS. Créez un style.css et créez un lien vers cette feuille de style à partir de votre fichier HTML, à l’intérieur de la balise <head> ; section :
<link rel="stylesheet" href="style.css"> A l’intérieur de votre style.css la première chose à faire est de remettre la marge du corps à zéro et de définir une marge inférieure :
body {
margin: 0;
margin-bottom: 20rem;
} Ensuite, vous devez transformer le conteneur extérieur en une grille CSS que vous pouvez utiliser pour disposer des éléments en deux dimensions. Le code suivant crée une grille avec autant de colonnes ou de lignes que nécessaire. La taille minimale de chaque colonne est de 300 px et la taille maximale est de 1 fraction du conteneur :
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
} Comme vous souhaitez positionner le texte par rapport à son conteneur, vous devez définir la position par rapport à l’enveloppe de l’image :
.image-wrapper {
position: relative;
overflow: hidden;
}
L’étape suivante consiste à styliser l’image. Affichez l’image en tant qu’élément bloc, faites en sorte qu’elle s’étende sur toute la largeur du conteneur et placez-la au centre de son conteneur :
.image-wrapper > img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center;
}
Quant au texte, positionnez-le au centre et donnez-lui une couleur de fond transparente et gris clair :
.image-wrapper > .content {
position: absolute;
inset: 0;
font-size: 2rem;
padding: 1rem;
background: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
Enregistrez le fichier CSS et ouvrez index.html dans votre navigateur. Vous devriez trouver une page similaire à celle de l’image ci-dessous.
Définir la transition sur les images et les textes
Maintenant que vous avez appliqué les styles de base aux images, l’étape suivante consiste à les animer. Commencez par ajouter une transition aux deux images et au texte correspondant :
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Cela signifie que tous les effets de transition (c.-à-d. fondu, zoom et flou) dureront 200 millisecondes et auront la même courbe temporelle.
Animation de fondu et de flou
Le premier style d’animation est le fondu du texte. Lorsque vous passez le curseur sur une image particulière, le contenu qui a l’attribut fondu Cet effet (animation de fondu en entrée et en sortie) sera appliqué à la classe Fade. Pour ce faire, l’opacité est réglée sur zéro et passe à un lorsque la souris survole une image particulière :
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Si vous enregistrez le fichier et consultez votre navigateur, vous constaterez que l’animation de fondu-enchaîné est effective. Mais vous remarquerez peut-être aussi que le texte est un peu difficile à lire (si l’image est austère et très contrastée). Rappelez-vous que toutes les images ont également un nom de classe flou. Cette option permet d’estomper les images afin d’ajouter le contraste nécessaire entre elles et le texte :
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Lorsque vous survolez l’image, vous voyez qu’elle s’estompe. Vous pouvez augmenter la valeur du pixel pour rendre le flou plus prononcé sur les images et ajouter ainsi plus de contraste entre elles et le texte.
Ajout d’autres effets
Les autres effets sont le glissement du texte vers la gauche, l’agrandissement de l’image et l’ajout de niveaux de gris à l’image. Voici le code permettant d’obtenir ces trois effets :
.image-wrapper > .content.slide-left {
transform: translateX(100%)
}
.image-wrapper:hover > .content.slide-left {
transform: translateX(0%)
}
.image-wrapper:hover > img.grey {
filter: greyscale(1)
}
.image-wrapper:hover > img.blur {
filter: blur(5px)
}
.image-wrapper:hover > img.zoom {
transform: scale(1.1)
}
Enregistrez le fichier, puis allez dans votre navigateur et survolez chaque image. Vous devriez voir les différents effets en action.
Pour compléter les effets de diapositive, vous pouvez créer trois autres enveloppes d’image, chacune contenant une image et du texte. Chaque élément de texte portera le nom de classe slide-up, glisser vers le bas, ou légère-droite. Ensuite, vous passez la valeur appropriée en pixel, em, ou rem, à l’intérieur de l’élément transform() pour créer les trois effets.
Grille CSS et Flexbox
CSS Grid et Flexbox sont deux fonctionnalités qui vous permettent de créer des mises en page fantastiques pour votre site web. Vous pouvez créer pratiquement n’importe quelle mise en page avec facilité et personnaliser les lignes et les colonnes à votre goût. Les colonnes sont également réactives par défaut. Apprendre à utiliser l’une plutôt que l’autre vous aidera à devenir un développeur CSS hors pair.
