Skapa en CSS-Only Image Reveal Effect med transparenta gränser
en CSS-only image reveal effect kan lösas på olika sätt. Det är faktiskt ganska enkelt att koda en design där bilden står ur (överflödas av) dess solida bakgrund -du bara placera en bild över ett mindre element med en solid bakgrund.
Du kan få samma resultat om du använder genomskinliga gränser, där du behåller storleken på bakgrundselementet är desamma som förgrunden och lägga till transparenta gränser för att skapa ett tomt utrymme för förgrunden att överfalla i.
Det finns några fördelar med att använda den senare metoden. Eftersom det är de transparenta gränserna som ger området förgrunden att överfalla in, kan vi kontrollera överflödets riktning mellan vänstra, högra, övre och nedre gränsen. Har också samma storlek för både förgrunden och bakgrunden gör det lättare att flytta båda elementen samtidigt tvärs över sidan.
I ett nötskal ska vi se hur vi ska skapa en CSS-only image reveal effekt använder en mindre solid bakgrund med en förgrundsbild som har genomskinliga gränser. Du kan kolla in slutgiltig demo Nedan.
1. Skapa den ursprungliga koden
HTML-wise, bara en I CSS använder vi två CSS-variabler, Vi lägger också till Vi lägg till en tom De Vi lägger till bilden i De På skärmdump nedan du kan se vad vi har hittills ( För att lägga till mindre (utskjutande) bakgrund bakom bilden, Vi använder det andra pseudoelementet, Vi skapar en annan CSS-variabel, De bredd beräknas som De höjd beräknas som Med Ett CSS-filter av Här är skärmdump av demo gjord hittills (med Vi Lägg till Som vi har redan lagt till Nedan ser du slutgiltig demo. Om du visar
--BGC och --dämpa för bakgrundsfärg och den mått av .foo behållare. I exemplet använde jag samma värde för bredd och höjd att få en fyrkantig låda, skapa separata variabler för höjd och bredd om du vill ha en rektangulär.positioner: relativ härska till .foo, så att dess pseudoelement, som vi ska använda för avslöjar bilden, kan vara absolut positionerad (se nedan) och således staplade på varandra. .foo --bgc: # FFCC03; - dim: 300px; bredd: var (- dim); höjd: var (- dim); bakgrundsfärg: var (- bgc); position: relativ;
innehåll fast egendom till båda pseudoelementen, .foo :: innan och .foo :: efter, för att få dem ordentligt gjorda. .foo :: före, .foo :: efter innehåll: "; position: absolut; vänster: 0; topp: 0;
.foo element, dess två pseudo-element, .foo :: innan, .foo :: efter, och deras :sväva pseudo-klasser få en övergång fast egendom det kommer det Lägg till en enkel övergång till dem i 500 millisekunder (en halv sekund). .foo, .foo: sväva, .foo :: före, .foo :: efter, .foo: sväva :: före, .foo: sväva :: efter övergång: omvandla 500mms inlåsning;
2. Lägg till bilden
.foo :: innan pseudo-elementet som en bakgrundsbild, och storlek det för att täcka hela pseudo-elementet med bredd och höjd egenskaper. Vi stapla den rätt under .foo element använda z-index: -1 regel. .foo :: före bredd: 100%; höjd: 100%; bakgrund: url (camel.png) center / cover; z-index: -1;
Centrum nyckelord centrerar bilden, medan omslag sökordet skallar bilden till täcka hela elementet samtidigt som dess bildförhållande upprätthålls. z-index avlägsnas från .foo :: innan så att den kan ses):
3. Lägg till bildrutan
.foo :: efter.--b, för gränsbredd. Vi ger tre transparenta gränser till ::efter pseudo-elementet: topp, höger och botten. .foo :: efter - b: 20px; bredd: calc (100% - var (- b)); höjd: calc (100% - calc (var (- b) * 2)); gränsen: var (- b) solid transparent; border-left: none; boxskugga: inset 0 var (- dim) 0 var (- bgc); filter: ljusstyrka (.8); z-index: -2;
calc (100% - var-b)) som återvänder den totala bredden av .foo minus den totala bredden av dess horisontella gränser (endast högra gränsen, eftersom det inte finns kvar gränsen).calc (100% - calc (var (- b) * 2)) som återvänder den totala höjden på .foo minus den totala bredden av dess vertikala gränser (övre och nedre gränsen).box-shadow egendom, vi också lägg till en horisontell insatsskugga av samma storlek som .foo (vilket är var (- dim)).ljusstyrka (0,8) mörkar bakgrundsfärgen lite, och slutligen, z-index: -2 regel placerar ::efter pseudo-element nedanför ::innan som innehåller bilden.z-index avlägsnas från båda pseudoelementen så att de kan ses):
4. Lägg till transformationen
omvandla fast egendom till de två pseudoelementen, så när användaren svänger över .foo, båda pseudoelementen är flyttas horisontellt.övergång egendom till alla delar i slutet av steg 1 är bildens rörelse och dess bakgrund båda animerade. .foo: sväva :: före, .foo: sväva :: efter transform: translateX (100%);
Bonus: Valfri marginal
.foo bredvid andra element på en sida och vill ha dessa andra element till flytta på dig när bilden och dess bakgrund glider ut, då lägg till en rätt marginal med samma bredd som den för .foo till .foo: hover element. .foo: svep marginal-höger: var (- dim);
