Opret en CSS-Only Image Reveal Effect med gennemsigtige grænser

I CSS bruger vi to CSS variabler, --BGC og --svag for baggrundsfarve og dimensioner af .foo beholder henholdsvis. I eksemplet brugte jeg samme værdi for bredden og højden for at få en firkantet kasse, opret separate variable til højden og bredden, hvis du vil have en rektangulær.

Vi tilføjer også position: relative regere til .foo, så at dets pseudo-elementer, som vi skal bruge til afslører billedet, måske absolut positioneret (se nedenfor), og således stablet på hinanden.

 .foo --bgc: # FFCC03; - dim: 300px; bredde: var (- dim); højde: var (- dim); baggrundsfarve: var (- bgc); stilling: relativ;  

Vi Tilføj en tom indhold ejendom til begge pseudoelementer, .foo :: før og .foo :: efter, for at få dem ordentligt gengivet.

 .foo :: før, .foo :: efter indhold: "; position: absolut; venstre: 0; top: 0; 

Det .foo element, dets to pseudo-elementer, .foo :: før, .foo :: efter, og deres : hover pseudo-klasser få en overgang ejendom det vil Tilføj en lethed-overgang til dem i 500 millisekunder (et halvt sekund).

 .foo, .foo: hover, .foo :: før, .foo :: after, .foo: hover :: før, .foo: hover :: efter overgang: transform 500ms let-in;  

2. Tilføj billedet

Vi tilføjer billedet til .foo :: før pseudo-element som baggrundsbillede, og størrelse det til at dække hele pseudo-elementet med bredde og højde ejendomme. Vi stable det lige under .foo element bruger z-indeks: -1 Herske.

 .foo :: før bredde: 100%; højde: 100%; baggrund: url (camel.png) center / cover; z-indeks: -1;  

Det centrum søgeord centrerer billedet, mens dække over Søgeord skalerer billedet til dække hele elementet samtidig med at dets aspektforhold bevares.

På den skærmbillede nedenfor du kan se hvad vi har hidtil (z-index fjernes fra .foo :: før så det kan ses):

3. Tilføj oversigtsbakgrunden

For at tilføje mindre (slide-out) baggrund bag billedet, vi bruger det andet pseudo-element, .foo :: efter.

Vi opretter en anden CSS-variabel, --b, for grænsebredde. Vi giver tre gennemsigtige grænser til ::efter pseudo-element: øverst, højre og nederst.

 .foo :: efter - b: 20px; bredde: calc (100% - var (- b)); højde: calc (100% - calc (var (- b) * 2)); grænse: var (- b) solid gennemsigtig; grænse-venstre: ingen; boksskygge: indsæt 0 var (- dim) 0 var (- bgc); filter: lysstyrke (.8); z-indeks: -2;  

Det bredde beregnes som calc (100% - var - b)) det vender tilbage den samlede bredde på .foo minus den samlede bredde af sine vandrette grænser (kun højre grænse, da der ikke er nogen grænse tilbage).

Det højde beregnes som calc (100% - calc (var (- b) * 2)) det vender tilbage den samlede højde af .foo minus den samlede bredde af sine lodrette grænser (øverste og nederste grænser).

Med box-shadow ejendom, vi også Tilføj en vandret indskudsskygge af størrelsen samme som .foo (som er var (- dim)).

Et CSS filter af lysstyrke (0,8) mørkere baggrundsfarven en lille smule og endelig den z-indeks: -2 Herske placerer ::efter pseudo-element nedenunder ::Før der indeholder billedet.

Her er den screenshot af demoen gjort indtil videre (med z-index fjernet fra begge pseudoelementer, så de kan ses):

4. Tilføj transformationen

Vi tilføj omdanne ejendom til de to pseudo-elementer, så når brugeren svæver over .foo, begge pseudo-elementer er flyttet vandret.

Som vi allerede tilføjet overgang ejendom til alle elementer i slutningen af ​​trin 1 er bevægelsen af ​​billedet og dets baggrund både animerede.

 .foo: hover :: før, .foo: hover :: efter transform: translateX (100%);  

Nedenfor kan du se endelig demo.

Bonus: Valgfri margen

Hvis du viser .foo ved siden af ​​andre elementer på en side og ønsker disse andre elementer til Flyt dig når billedet og dets baggrund glider ud, så Tilføj en højre margen med samme bredde som den for .foo til .foo: hover element.

 .foo: svinge margin-right: var (- dim);