Créer un effet Révéler une image avec CSS uniquement avec des bordures transparentes
UNE Effet de révélation d'image CSS uniquement peut être résolu de différentes manières. Il est en fait assez facile de coder un dessin dans lequel le l'image se démarque de (est survolé par) son fond solide -tu viens placer une image sur un élément plus petit avec un fond solide.
Vous pouvez obtenir le même résultat si vous utilisez frontières transparentes, où vous gardez le taille de l'élément de fond identique comme celle du premier plan et ajouter des bordures transparentes afin de créer un espace vide pour le premier plan déborder dans.
Il y a quelques avantages à utiliser cette dernière méthode. Etant donné que ce sont les frontières transparentes qui fournissent la zone au premier plan à déborder, nous pouvons contrôler la direction du débordement entre les bordures gauche, droite, supérieure et inférieure. En outre, ayant la même taille pour le premier plan et l'arrière-plan facilite le déplacement simultané des deux éléments à travers la page.
En un mot, nous allons voir comment créer un effet de révélation d'image uniquement CSS utilisant un petit fond solide avec un image de premier plan avec des bordures transparentes. Vous pouvez vérifier le démo finale au dessous de.
1. Créez le code initial
HTML-sage, seulement un En CSS, on utilise deux variables CSS, Nous ajoutons aussi le nous ajouter un vide le Nous ajoutons l'image à la le Sur le capture d'écran ci-dessous vous pouvez voir ce que nous avons jusqu'à présent ( Pour ajouter le arrière-plan plus petit (coulissant) derrière l'image, nous allons utiliser l'autre pseudo-élément, Nous créons une autre variable CSS, le largeur est calculé comme le la taille est calculé comme Avec le Un filtre CSS de Ici se trouve le capture d'écran de la démo rendu jusqu'à présent (avec nous ajouter le Comme nous déjà ajouté le Ci-dessous, vous pouvez voir le démo finale. Si vous affichez
--bgc et --faible pour le la couleur de fond et le dimensions du .foo conteneur, respectivement. Dans l'exemple, j'ai utilisé le même valeur pour la largeur et la hauteur pour obtenir une boîte de forme carrée, créez variables séparées pour la hauteur et la largeur si vous voulez un rectangle.position: relative règle de .foo, de sorte que ses pseudo-éléments, que nous allons utiliser pour révélant l'image, peut être absolument positionné (voir ci-dessous), et donc empilés les uns sur les autres. .foo --bgc: # FFCC03; --dim: 300px; largeur: var (- dim); hauteur: var (- dim); couleur de fond: var (- bgc); position: relative;
contenu propriété aux deux pseudo-éléments, .foo :: before et .foo :: après, pour les rendre correctement. .foo :: before, .foo :: after contenu: "; position: absolu; gauche: 0; haut: 0;
.foo élément, ses deux pseudo-éléments, .foo :: before, .foo :: après, et leur :flotter pseudo-classes obtenir un transition propriété ça va ajouter une transition facile à eux pour 500 millisecondes (une demi-seconde). .foo, .foo: hover, .foo :: before, .foo :: après, .foo: hover :: before, .foo: hover :: after transition: transform 500ms easy-in;
2. Ajouter l'image
.foo :: before pseudo-élément comme image de fond, et le dimensionner pour couvrir le pseudo-élément entier avec le largeur et la taille Propriétés. nous empiler juste sous la .foo élément en utilisant le z-index: -1 règle. .foo :: before width: 100%; hauteur: 100%; background: url (camel.png) center / cover; z-index: -1;
centre mot-clé centre l'image, tandis que le couverture mot clé redimensionne l'image à couvrir tout l'élément tout en maintenant son rapport d'aspect. z-index est retiré de .foo :: before pour que cela soit visible):
3. Ajouter le fond coulissant
.foo :: après.--b, pour le largeur de la bordure. Nous donnons trois bordures transparentes au ::après pseudo-élément: en haut, à droite et en bas. .foo :: after --b: 20px; largeur: calc (100% - var (- b)); hauteur: calc (100% - calc (var (- b) * 2)); bordure: var (- b) solide transparent; frontière gauche: aucune; box-shadow: incrément 0 var (- dim) 0 var (- bgc); filtre: luminosité (0,8); z-index: -2;
calc (100% - var - b)) qui revient la largeur totale de .foo moins la largeur totale de ses bordures horizontales (bordure droite uniquement, puisqu'il n'y a pas de bordure gauche).calc (100% - calc (var (- b) * 2)) qui revient la hauteur totale de .foo moins la largeur totale de ses bordures verticales (bordures supérieure et inférieure).boîte ombre la propriété, nous avons aussi ajouter une ombre incrustée horizontale de la même taille que .foo (lequel est var (- dim)).luminosité (.8) assombrit la couleur de fond un peu, et enfin, le z-index: -2 règle place le ::après pseudo-élément en dessous ::avant qui contient l'image.z-index supprimés des deux pseudo-éléments pour pouvoir les voir):
4. Ajouter la transformation
transformer propriété aux deux pseudo-éléments, donc lorsque l'utilisateur passe la souris sur .foo, les deux pseudo-éléments sont déplacé horizontalement.transition propriété à tous les éléments à la fin de l'étape 1, le mouvement de l'image et son arrière-plan sont tous deux animés. .foo: hover :: before, .foo: hover :: after transform: translateX (100%);
Bonus: marge optionnelle
.foo à côté d'autres éléments sur une page et que vous voulez ces autres éléments s'éloigner lorsque l'image et son arrière-plan glissent, puis ajouter une marge droite de la même largeur que celle de .foo au .foo: vol stationnaire élément. .toto: survol marge-droite: var (- dim);
