Opprett en CSS-Only Image Reveal Effect med gjennomsiktige grenser

I CSS bruker vi to CSS-variabler, --BGC og --dim for bakgrunnsfarge og dimensjoner av .foo beholder, henholdsvis. I eksemplet brukte jeg samme verdi for bredde og høyde for å få en firkantet boks, opprett separate variabler for høyde og bredde hvis du vil ha en rektangulær.

Vi legger også til stilling: relativ regere til .foo, slik at dens pseudo-elementer, som vi skal bruke til avslører bildet, kan være helt posisjonert (se nedenfor), og dermed stablet på hverandre.

 .foo --bgc: # FFCC03; - dim: 300px; bredde: var (- dim); høyde: var (- dim); bakgrunnsfarge: var (- bgc); posisjon: relativ;  

Vi legg til en tom innhold eiendom til begge pseudo-elementene, .foo :: før og .foo :: etter, for å få dem riktig gjengitt.

 .foo :: før, .foo :: etter innhold: "; posisjon: absolutt; venstre: 0; topp: 0; 

De .foo element, dets to pseudo-elementer, .foo :: før, .foo :: etter, og deres :sveve pseudo-klasser få en overgang eiendom det vil legg til en enkel overgang til dem i 500 millisekunder (et halvt sekund).

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

2. Legg til bildet

Vi legger til bildet i .foo :: før pseudo-element som bakgrunnsbilde, og størrelse den til å dekke hele pseudo-elementet med bredde og høyde eiendommer. Vi stable den rett under .foo element bruker z-indeks: -1 regel.

 .foo :: før bredde: 100%; høyde: 100%; bakgrunn: url (camel.png) senter / deksel; z-indeks: -1;  

De senter søkeord sentrerer bildet, mens dekke Søkeordet skalerer bildet til dekke hele elementet samtidig som aspektforholdet opprettholdes.

På skjermbilde nedenfor du kan se hva vi har så langt (z-indeks er fjernet fra .foo :: før slik at den kan sees):

3. Legg til uttrekksbakgrunnen

For å legge til mindre (lysbilde) bakgrunn bak bildet, Vi bruker det andre pseudoelementet, .foo :: etter.

Vi oppretter en annen CSS-variabel, --b, for kantbredde. Vi gir tre gjennomsiktige grenser til ::etter pseudo-element: topp, høyre og bunn.

 .foo :: etter - b: 20px; bredde: kalk (100% - var (- b)); høyde: kalk (100% - kalk (var (- b) * 2)); grense: var (- b) solid gjennomsiktig; border-left: none; boksskygge: innsett 0 var (- dim) 0 var (- bgc); filter: lysstyrke (.8); z-indeks: -2;  

De bredde er beregnet som calc (100% - var - b)) som returnerer den totale bredden på .foo minus den totale bredden av sine horisontale grenser (kun høyre kant, siden det ikke er igjen grensen).

De høyde er beregnet som kalk (100% - kalk (var (- b) * 2)) som returnerer den totale høyden på .foo minus den totale bredden av sine vertikale grenser (øverste og nederste grenser).

Med box-shadow eiendom, vi også legg til en horisontal innskuddskygge av størrelsen samme som .foo (som er var (- dim)).

Et CSS filter av lyshet (0,8) mørk bakgrunnsfargen litt, og til slutt, den z-indeks: -2 regel plasserer ::etter pseudo-element under ::før som inneholder bildet.

Her er skjermbilde av demoen gjengitt så langt (med z-indeks fjernet fra begge pseudoelementene slik at de kan ses):

4. Legg til transformasjonen

Vi Legg til forvandle eiendom til de to pseudo-elementene, så når brukeren svinger over .foo, begge pseudo-elementene er flyttet horisontalt.

Som vi allerede lagt til overgang eiendom til alle elementer på slutten av trinn 1 er bevegelsen av bildet og dets bakgrunn både animert.

 .foo: svever :: før, .foo: svever :: etter transform: translateX (100%);  

Nedenfor kan du se siste demonstrasjon.

Bonus: Valgfritt margin

Hvis du viser .foo ved siden av andre elementer på en side og ønsker disse andre elementene til Flytt deg når bildet og dets bakgrunn glir ut, da legg til en høyre margin med samme bredde som den for .foo til .foo: hover element.

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