Comment créer un effet de superposition d'image sur le plan de volant?

L'insertion d'images simples sur vos pages Web est une façon d'améliorer leur apparence, cependant, l'ajout de divers effets aux images peut embellir davantage les pages Web et peut créer une expérience utilisateur incroyable. Une catégorie intéressante d'effets que vous pouvez ajouter aux images est les effets de superposition. Ces effets sont placés au-dessus des images et sont utilisés avec un effet de survol. Par conséquent, ils n'apparaissent que lorsque l'utilisateur amène la souris à l'image.

Les types d'effets discutés dans ce post sont.

1. Disparaître
2. Glissement
3. Glisser le bas
4. Glisser à gauche
5. Glisser à droite

Apprenons à les implémenter à l'aide d'exemples.

Avant de sauter vers l'ajout de tout type d'effet de superposition d'image, insérons d'abord une image dans notre page Web:

Html

Dans le code ci-dessus, nous avons créé deux conteneurs div. Le premier conteneur DIV avec la classe «div» tient l'image ainsi qu'un autre conteneur Div qui maintiendra l'effet de superposition d'image qui apparaît lorsque l'utilisateur plane sur l'image.

Sortir

Une image a été insérée avec succès sur la page Web.

Maintenant que nous avons inclus l'image, nous apprendrons à ajouter les différents effets de superposition d'image indiqués au début de l'article.

Effet de superposition de fondu

Dans le but d'ajouter un effet de superposition de fondu sur l'image, suivez le code ci-dessous.

CSS

.image
Largeur: 250px;
hauteur: 250px;

.div
Position: relative;
Largeur: 450px;

.superposition
Position: absolue;
transition: tout 0.4S facilité;
Opacité: 0;

.Div: planer .superposition
Opacité: 0.8;

.Fadeeffect
hauteur: 250px;
Largeur: 250px;
en haut: 0;
Gauche: 100px;
Color en arrière-plan: Whitesmoke;

Tout d'abord, nous définissons une certaine largeur et hauteur de l'image, puis ajustant la position du premier conteneur div comme relatif afin que nous puissions absolument positionner le deuxième conteneur div qui contient l'effet de superposition.

Après avoir positionné les deux conteneurs Div, nous utilisons la propriété raccourci de transition pour donner un effet de transition à tous les éléments pour une durée de 0.4 secondes de manière «facilité». Pendant ce temps, l'opacité avant l'effet de survol a été définie sur 0, tandis que lorsque l'utilisateur oscille l'opacité de l'effet de superposition a été définie sur 0.8.

Enfin, nous donnons une largeur et une hauteur à l'effet de superposition de fondu. La largeur et la hauteur de l'image avant et après l'application de la superposition doivent être les mêmes afin que l'effet soit placé exactement au-dessus de l'image. De plus, nous avons utilisé les propriétés supérieure et gauche pour positionner l'effet exactement sur le dessus de l'image et lui avons attribué une couleur de fumée blanche.

Sortir

Un effet de superposition de fondu a été mis en œuvre avec succès.

Effet de superposition de glissière

Considérez le code ci-dessous pour comprendre comment ajouter un effet de superposition de diapositive sur une image.

CSS

.image
Largeur: 250px;
hauteur: 250px;

.div
Position: relative;
Largeur: 450px;

.superposition
Position: absolue;
transition: tout 0.4S facilité;
Opacité: 0;

.Div: planer .superposition
Opacité: 0.8;

.Slidetopeffect
Largeur: 250px;
hauteur: 0;
en haut: 0;
À droite: 100px;
Color en arrière-plan: Whitesmoke;

.Div: planer .Slidetopeffect
hauteur: 250px;

Le style et la position des conteneurs div et l'image sont le même jusqu'à l'ajustement de l'opacité de l'effet de survol.

Dans le but d'ajouter un effet de superposition de glissière à l'image, nous avons défini la largeur de l'effet de superposition comme la largeur de l'image et pour la placer sur l'image, nous avons utilisé les propriétés supérieures et droites. De plus, pour glisser l'effet du haut, nous avons ajusté la hauteur de l'effet de superposition à zéro avant l'effet de survol. Cependant, une fois que l'utilisateur apporte la souris sur l'image, la hauteur de l'effet sera la même que celle de l'image.

Sortir

Un effet de superposition de glissière créé avec une grande facilité.

Effet de superposition du fond de glissière

Ci-dessous, nous vous avons fourni le code avec lequel nous ajouterons un effet de superposition de la diapositive sur l'image.

CSS

.image
Largeur: 250px;
hauteur: 250px;

.div
Position: relative;
Largeur: 450px;

.superposition
Position: absolue;
transition: tout 0.4S facilité;
Opacité: 0;

.Div: planer .superposition
Opacité: 0.8;

.Slidebottomeffect
hauteur: 0;
Largeur: 250px;
En bas: 3px;
Gauche: 100px;
Color en arrière-plan: Whitesmoke;

.Div: planer .Slidebottomeffect
hauteur: 300px;

Le reste du code est le même que celui utilisé dans l'exemple ci-dessus, cependant, pour placer l'effet en haut de l'image, nous avons utilisé les propriétés inférieures et droites et pour glisser l'effet en bas, nous attribuons la même hauteur à l'effet comme celui de l'image sur vol.

Sortir

L'effet de superposition du fond de diapositive a été ajouté avec succès.

Effet de superposition gauche de glissement

Consultez le code ci-dessous pour ajouter un effet de superposition gauche de la diapositive sur l'image.

CSS

.image
Largeur: 250px;
hauteur: 250px;

.div
Position: relative;
Largeur: 450px;

.superposition
Position: absolue;
transition: tout 0.4S facilité;
Opacité: 0;

.Div: planer .superposition
Opacité: 0.8;

.SlideleFteffect
hauteur: 250px;
Largeur: 0;
en haut: 0;
Gauche: 100px;
Color en arrière-plan: Whitesmoke;

.Div: planer .SlideleFteffect
Largeur: 250px;

Dans le but d'ajouter un effet de superposition gauche de la diapositive sur l'image, nous avons réglé la hauteur à 250px, ce qui est la même que la hauteur de l'image et de la largeur à 0px avant l'effet de survol. En attendant, pour positionner correctement l'effet sur l'image, nous avons utilisé les propriétés supérieure et gauche. Et enfin, après l'effet de survol, la largeur a été définie à 250px, ce qui est le même que la largeur de l'image.

Sortir

L'effet gauche glissant fonctionne correctement.

Effet de superposition à droite glisser

Le dernier effet de superposition que nous allons démontrer est l'effet de superposition droite de la diapositive. Suivez le code ci-dessous.

CSS

.image
Largeur: 250px;
hauteur: 250px;

.div
Position: relative;
Largeur: 450px;

.superposition
Position: absolue;
transition: tout 0.4S facilité;
Opacité: 0;

.Div: planer .superposition
Opacité: 0.8;

.SlideRightEffect
hauteur: 250px;
Largeur: 0;
en haut: 0;
À droite: 100px;
Color en arrière-plan: Whitesmoke;

.Div: planer .SlideRightEffect
Largeur: 250px;

Pour créer un effet de superposition droite de la diapositive sur l'image, nous avons attribué certaines valeurs en haut, et les propriétés droites en attendant la hauteur de l'effet de superposition de la même chose que celle de l'image et de la largeur de l'effet à 0px avant l'effet de volage. Cependant, lors de l'ajout de l'effet de survol, la largeur a été ajustée à 250px similaire à celle de l'image.

Sortir

Un effet de superposition droite de diapositive a été ajouté avec succès à l'image.

Conclusion

Dans le but d'ajouter des effets de superposition aux images, vous devez les placer dans un conteneur Div et utiliser diverses propriétés CSS pour ajouter des effets de superposition sur eux. L'ajout de ces effets aux images peut être un moyen intéressant d'améliorer la beauté des pages Web. Il y a plusieurs effets de superposition que vous pouvez ajouter à vos images telles que, fondu, glissière en haut, glissière à gauche et glisser à droite. Ces effets peuvent être ajoutés en utilisant diverses propriétés CSS. Cette rédaction montre comment ajouter divers effets de superposition d'image sur le plan de volant à l'aide d'exemples pertinents.