Home-theater-designers
Les effets de survol d'image peuvent ajouter un niveau supplémentaire de finition à votre site Web. Ils créent un effet lisse, rendant les galeries d'images ou les carrousels plus agréables à parcourir. La meilleure partie est que vous pouvez créer ces effets avec juste du CSS et pas de JavaScript.
Vous pouvez créer différents styles d'animation sur vos images. Celles-ci incluent le flou ou le zoom de l'arrière-plan, la décoloration ou le glissement du texte et la modification de la couleur d'arrière-plan.
UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU
Création du HTML pour
Commencez par créer un index.html fichier dans un dossier vide sur votre ordinateur, puis ouvrez le fichier avec un éditeur de texte. Dans le fichier, créez le squelette HTML et ajoutez le balisage suivant dans les balises de corps 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 wrappers d'image. Les éléments div avec le image-wrapper classe sert d'enveloppe pour l'image et son texte correspondant. L'image et le contenu de chaque section sont associés à un ensemble unique de classes.
À l'intérieur de la feuille de style, vous cibler ces éléments par leurs noms de classe et appliquer les différents effets de style et d'animation. Le texte ne s'affichera pas par défaut ; vous ne l'afficherez que lorsque vous survolerez l'enveloppe d'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 avec CSS. Créer un style.css fichier et un lien vers cette feuille de style à partir de votre fichier HTML, à l'intérieur du
<link rel="stylesheet" href="style.css">
A l'intérieur de votre style.css fichier, la première chose que vous devez faire est de réinitialiser la marge sur le corps à zéro et de définir une marge inférieure :
body {
margin: 0;
margin-bottom: 20rem;
}
Ensuite, vous devez transformer le conteneur le plus à l'extérieur en un 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 qui correspondent. La taille minimale de chaque colonne est de 300 pixels et la taille maximale est d'une fraction du conteneur :
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
Puisque vous souhaitez positionner le texte par rapport à son conteneur, vous devez définir la position par rapport à l'enveloppe d'image :
.image-wrapper {
position: relative;
overflow: hidden;
}
L'étape suivante consiste à styliser l'image. Affichez l'image en tant qu'élément de bloc, faites-la s'étendre sur toute la largeur du conteneur et placez-la ajustée 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 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.
Réglage de la transition sur et des textes
Maintenant que vous avez appliqué les styles de base aux images, l'étape suivante consiste à leur ajouter une animation. Commencez par ajouter une transition aux deux images et à leur texte correspondant :
comment faire du texte souligné dans photoshop
.image-wrapper > img,
.image-wrapper > .content {
transition: 200ms ease-in-out;
}
Cela signifie que tous les effets de transition (c'est-à-dire le fondu d'entrée, le zoom et le flou) dureront 200 millisecondes et auront la même courbe de synchronisation.
Animation de fondu enchaîné et de flou
Le premier style d'animation s'estompe dans le texte. Lorsque vous survolez un wrapper d'image particulier, le contenu qui a le disparaître classe aura cet effet (animation de fondu d'entrée et de fondu de sortie) qui lui sera appliqué. Vous y parvenez en définissant l'opacité sur zéro et en la modifiant sur un lorsqu'une souris survole un wrapper d'image particulier :
.image-wrapper > .content.fade {
opacity: 0;
}
.image-wrapper:hover > .content.fade {
opacity: 1;
}
Si vous enregistrez le fichier et vérifiez votre navigateur, vous verrez l'animation de fondu en vigueur. Mais vous remarquerez peut-être aussi que le texte est un peu difficile à lire (si l'image est nette et a beaucoup de contraste). Rappelons que toutes les images ont aussi un nom de classe se brouiller . Il s'agit de flouter les images pour ajouter un contraste indispensable entre elles et le texte :
image-wrapper:hover > img.blur {
filter: blur(5px)
}
Maintenant, lorsque vous survolez l'image, vous pouvez voir qu'elle va simplement devenir floue. Vous pouvez augmenter la valeur du pixel pour rendre le flou plus prononcé sur les images, ajoutant ainsi plus de contraste entre celui-ci et le texte.
Ajout d'autres effets
Les autres effets sont le glissement du texte depuis la gauche, le zoom sur l'image et l'ajout de niveaux de gris à l'image. Voici le code pour obtenir les 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 accédez à votre navigateur et survolez chaque image. Vous devriez voir les différents effets en action.
Pour compléter les effets de diapositives, vous pouvez créer trois autres wrappers d'image, chacun contenant une image et du texte. Chaque morceau de texte aurait le nom de la classe glisser vers le haut , glisse vers le bas, ou légèrement à droite . Ensuite, vous passeriez la valeur appropriée dans pixel, em ou rem , à l'intérieur de transformer() fonction 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 facilement créer pratiquement n'importe quelle mise en page et personnaliser les lignes et les colonnes à votre goût. Les colonnes seront également réactives par défaut. Apprendre quand utiliser l'un plutôt que l'autre vous aidera à devenir l'un des meilleurs développeurs CSS à 1%.