Maak een CSS-Only Image Reveal-effect met transparante randen
EEN CSS-only image reveal effect kan op verschillende manieren worden opgelost. Het is eigenlijk vrij eenvoudig om een ontwerp te coderen waarin het afbeelding onderscheidt zich van (wordt overstroomd door) zijn solide achtergrond -jij gewoon plaats een afbeelding over een kleiner element met een stevige achtergrond.
U kunt hetzelfde resultaat krijgen als u gebruikt transparante randen, waar je de grootte van het achtergrondelement hetzelfde als die van de voorgrond en voeg transparante randen toe om maak een lege ruimte voor de voorgrond om in over te lopen.
Er zijn enkele voordelen bij het gebruik van de laatste methode. Omdat het de transparante randen zijn die de ruimte voor de voorgrond bieden om over te stromen, kunnen we dat controleer de richting van de overloop tussen de linker-, rechter-, boven- en onderrand. Ook dezelfde grootte hebben voor zowel de voorgrond als de achtergrond maakt het gemakkelijker om beide elementen tegelijk te verplaatsen over de pagina.
In een notendop, we zullen zien hoe maak een CSS-only image reveal-effect aan met behulp van een kleinere vaste achtergrond met een voorgrondafbeelding met transparante randen. Je kunt het laatste demo beneden.
1. Maak de eerste code
HTML-wise, maar een In de CSS gebruiken we twee CSS-variabelen, We voegen ook de Wij voeg een leeg toe De We voegen de afbeelding toe aan de De Op de screenshot hieronder je kunt zien wat we tot nu toe hebben ( Om de. Toe te voegen kleinere (uitschuifbare) achtergrond achter de afbeelding, we zullen het andere pseudo-element gebruiken, We maken een andere CSS-variabele, De breedte wordt berekend als De hoogte wordt berekend als Met de Een CSS-filter van Hier is de screenshot van de demo tot nu toe weergegeven (met Wij voeg het toe Zoals wij heeft al de Hieronder ziet u de laatste demo. Als u weergeeft
--BGC en --verduisteren voor de achtergrond kleur en de dimensies van de .foo container, respectievelijk. In het voorbeeld gebruikte ik de dezelfde waarde voor de breedte en hoogte om een vierkantvormige doos te maken, maak afzonderlijke variabelen voor de hoogte en de breedte als u een rechthoekig wilt.position: relative regel aan .foo, dus dat zijn pseudo-elementen, waar we voor gaan gebruiken het beeld onthullen, kan zijn absoluut gepositioneerd (zie hieronder), en dus op elkaar gestapeld. .foo --bgc: # FFCC03; --dim: 300 px; breedte: var (- dim); hoogte: var (- dim); achtergrondkleur: var (- bgc); positie: relatief;
inhoud eigendom voor beide pseudo-elementen, .foo :: vóór en .foo :: na, om ze op de juiste manier weer te geven. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo element, zijn twee pseudo-elementen, .foo :: vóór, .foo :: na, en hun : hover pseudo-classes krijg een overgang eigendom dat zal voeg een gemakkelijke overgang toe voor hen gedurende 500 milliseconden (een halve seconde). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms ease-in;
2. Voeg de afbeelding toe
.foo :: vóór pseudo-element als achtergrondafbeelding, en formaat om het hele pseudo-element te dekken met de breedte en hoogte eigenschappen. Wij stapel het vlak onder de .foo element de ... gebruiken z-index: -1 regel. .foo :: before width: 100%; hoogte: 100%; achtergrond: url (camel.png) centrum / cover; z-index: -1;
centrum trefwoord centreert het beeld, Terwijl de deksel zoekwoord schalen de afbeelding naar bedek het hele element terwijl de beeldverhouding behouden blijft. z-index is verwijderd van .foo :: vóór zodat het kan worden gezien):
3. Voeg de slide-out achtergrond toe
.foo :: na.--b, voor de grensbreedte. Wij geven drie transparante randen naar de ::na pseudo-element: boven, rechts en onderaan. .foo :: after --b: 20px; breedte: calc (100% - var (- b)); hoogte: berekend (100% - berekend (var (- b) * 2)); rand: var (- b) vast transparant; border-left: none; box-shadow: inzet 0 var (- dim) 0 var (- bgc); filter: helderheid (.8); z-index: -2;
calc (100% - var - b)) dat komt terug de totale breedte van .foo minus de totale breedte van de horizontale randen (alleen rechterrand, omdat er geen linkerrand is).calc (100% - calc (var (- b) * 2)) dat komt terug de totale hoogte van .foo minus de totale breedte van de verticale randen (boven- en ondergrenzen).box-shadow eigendom, wij ook voeg een horizontale inzetschaduw toe van dezelfde grootte als .foo (dat is var (- dim)).lichtsterkte (0,8) maakt de achtergrondkleur donkerder een klein beetje, en tot slot, de z-index: -2 regel plaatst de ::na pseudo-element eronder ::voor die de afbeelding bevat.z-index verwijderd van beide pseudo-elementen, zodat ze kunnen worden gezien):
4. Voeg de transformatie toe
transformeren eigendom naar de twee pseudo-elementen, dus wanneer de gebruiker zweeft .foo, beide pseudo-elementen zijn horizontaal verplaatst.overgang eigendom van alle elementen aan het einde van stap 1 zijn de beweging van het beeld en de achtergrond beide geanimeerd. .foo: hover :: before, .foo: hover :: after transformatie: translateX (100%);
Bonus: optionele marge
.foo naast andere elementen op een pagina en wil deze andere elementen ga weg wanneer het beeld en de achtergrond eruit schuiven, dan voeg een rechtermarge van dezelfde breedte toe als die van .foo naar de .foo: hover element. .foo: hover margin-right: var (- dim);
