Vytvořte efekt CSS-Image Image Reveal s průhlednými ohraničeními

V CSS používáme dvě proměnné CSS, --bgc a --ztlumit pro barva pozadí a rozměry z .foo kontejneru. V příkladu jsem použil stejnou hodnotu pro šířku a výšku získat čtverec-tvarovaný box, vytvořit oddělené proměnné pro výšku a šířku, pokud chcete obdélníkový.

Také přidáme poloha: relativní pravidlo .foo, takže jeho pseudo-elementy, pro které budeme používat odhalení obrazu, může být absolutně umístěna (viz níže), a tudíž na sebe.

 .foo --bgc: # FFCC03; --dim: 300px; width: var (- dim); výška: var (- dim); barva pozadí: var (- bgc); poloha: relativní;  

My přidat prázdnou obsah vlastnictví k oběma pseudoprvkům, .foo :: předtím a .foo :: po, aby byly správně vykresleny.

 .foo :: before, .foo :: after content: "; pozice: absolutní; vlevo: 0; horní: 0; 

.foo element, jeho dva pseudo-elementy, .foo :: předtím, .foo :: po, a jejich :vznášet se pseudo-třídy dostat přechod vlastnictví to bude přidejte snadný přechod k nim po dobu 500 milisekund (půl sekundy).

 .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms easy-in;  

2. Přidejte obrázek

Přidáme obrázek do .foo :: předtím pseudo-element jako obrázek na pozadí, a velikost, aby pokryla celý pseudo-prvek s šířka a výška vlastnosti. My stoh to přímo pod .foo živel za použití z-index: -1 pravidlo.

 .foo :: before width: 100%; výška: 100%; pozadí: url (camel.png) střed / kryt; z-index: -1;  

centrum klíčové slovo vycentruje obraz, zatímco Pokrýt klíčové slovo změní velikost obrázku na pokrývají celý prvek při zachování poměru stran.

Na níže můžete vidět, co máme zatím (z-index je odstraněn z .foo :: předtím tak, aby bylo vidět):

3. Přidejte vysunuté pozadí

Přidání menší (vysouvací) pozadí za obrazem, použijeme další pseudo-element, .foo :: po.

Vytváříme další proměnnou CSS, --b, pro šířka okraje. Dáme tři průhledné okraje na ::po pseudoprvek: horní, pravý a dolní.

 .foo :: after --b: 20px; width: calc (100% - var (- b)); výška: calc (100% - calc (var (- b) * 2)); hranice: var (- b) pevná průhledná; border-left: žádný; box-shadow: inset 0 var (- dim) 0 var (- bgc); filtr: jas (.8); z-index: -2;  

šířka se vypočte jako calc (100% - var - b)) vrátí celková šířka .foo mínus celková šířka jeho vodorovných hranic (pouze pravý okraj, protože není ponechán okraj).

výška se vypočte jako calc (100% - calc (var (- b) * 2)) vrátí celková výška .foo mínus celková šířka svislých hran (horní a dolní hranice).

S box-stín majetku, také přidat horizontální stín velikosti stejné jako .foo (který je var (- dim)).

CSS filtr jas (.8) ztmaví barvu pozadí trochu, a konečně z-index: -2 pravidlo umístí ::po pseudo-prvek pod ním ::před obsahující obrázek.

Tady je screenshot demo (zatím) z-index odstraněny z obou pseudoprvků, takže je lze vidět):

4. Přidejte transformaci

My přidat přeměnit vlastnictví na dva pseudo-elementy, takže když uživatel přejde .foo, oba pseudo-elementy jsou vodorovně.

Jako my již přidán přechod na všechny prvky na konci kroku 1 je pohyb obrazu a jeho pozadí oba animovaní.

 .foo: hover :: before, .foo: hover :: after transform: translateX (100%);  

Níže vidíte závěrečné demo.

Bonus: Volitelná marže

Pokud se zobrazí .foo vedle ostatních prvků na stránce a chcete, aby tyto další prvky Uhni když se obraz a jeho pozadí vysune, pak přidejte pravý okraj stejné šířky jako šířka .foo na .foo: vznášet se živel.

 .foo: hover pravý okraj: var (- dim);