Vytvorte efekt odhalenia obrazu len s CSS s priehľadnými hranicami

V CSS používame dve premenné CSS, --BGC a --stlmiť pre farbu pozadia a rozmery z .foo kontajner, resp. V príklade som použil rovnaká hodnota pre šírku a výšku získať štvorcový tvar, vytvorte oddelené premenné pre výšku a šírku, ak chcete obdĺžnikový.

Pridáme tiež Pozícia: relatívna pravidlo na .foo, takže jeho pseudo-prvky, ktoré budeme používať odhalenie obrazu, môže byť absolútne umiestnená (pozri nižšie), a tak stohované na seba.

 .foo -bgc: # FFCC03; --dim: 300px; šírka: var (- dim); výška: var (- dim); farba pozadia: var (- bgc); pozícia: relatívna;  

my pridať prázdne obsah vlastnosť na oba pseudo-prvky, .foo :: predtým a .foo :: po, aby ste ich dostali správne.

 .foo :: pred, .foo :: po content: "; position: absolute; left: 0; top: 0; 

.foo element, jeho dva pseudo-prvky, .foo :: predtým, .foo :: po, a ich :vznášať sa pseudo-triedy dostať prechod vlastnosť to bude pridajte jednoduchý prechod k nim za 500 milisekúnd (pol sekundy).

 .foo, .foo: hover, .foo :: pred, .foo :: po, .foo: hover :: pred, .foo: hover :: po transition: transformácia 500ms easy-in;  

2. Pridajte obrázok

Obrázok sme pridali do priečinka .foo :: predtým pseudo-prvok ako obrázok na pozadí, a veľkosť, aby pokryla celý pseudo-prvok s šírka a výška Vlastnosti. my uložte ho priamo pod .foo element pomocou z-index: -1 pravidlo.

 .foo :: pred šírka: 100%; výška: 100%; pozadie: url (camel.png) centrum / obal; z-index: -1;  

centrum kľúčových slov vycentruje obraz, kým veko kľúčové slovo rozlíši obrázok na pokryť celý prvok pri zachovaní jeho pomeru strán.

Na nižšie môžete vidieť, čo máme doteraz (z-index je odstránený z .foo :: predtým tak, aby to bolo viditeľné):

3. Pridajte pozadie posúvania

Ak chcete pridať menšie (vysunuté) pozadie za obrázkom, použijeme druhý pseudo-element, .foo :: po.

Vytvárame ďalšiu premennú CSS, --b, pre hraničná šírka. Dáme tri priehľadné hranice na :: po pseudo-element: hore, vpravo a dole.

 .foo :: po - b: 20px; šírka: calc (100% - var (- b)); výška: vypočítať (100% - vypočítať (var (- b) * 2)); hranica: var (- b) pevná transparentná; border-left: none; box-tieň: vložka 0 var (- dim) 0 var (- bgc); filter: jas (.8); z-index: -2;  

šírka sa vypočíta ako calc (100% - var - b)) ktorý sa vráti celková šírka .foo mínus celková šírka horizontálnych hraníc (len v pravej hranici, pretože tu nie je ponechaná hranica).

výška sa vypočíta ako calc (100% - výpočet (var (- b) * 2)) ktorý sa vráti celková výška .foo mínus celková šírka jeho vertikálnych hraníc (horné a spodné okraje).

S box-shadow majetok, aj my pridajte horizontálny vložený tieň rovnakej veľkosti ako .foo (ktorý je var (- dim)).

CSS filter z jas (0,8) stmavne farbu pozadia trochu, a napokon, z-index: -2 pravidlo umiestni :: po pseudo-element pod :: predtým ktorý obsahuje obrázok.

Tu je screenshot demo doteraz poskytnuté (s z-index odstránené z obidvoch pseudo-elementov tak, aby boli viditeľné):

4. Pridajte transformáciu

my pridajte premeniť vlastnosť k dvom pseudo-elementom, takže keď sa používateľ pohybuje nad .foo, oba pseudo-prvky sú pohyboval horizontálne.

Ako my už pridané prechod majetok ku všetkým prvkom na konci kroku 1 je pohyb obrazu a jeho pozadia oba animované.

 .foo: hover :: pred, .foo: pohybovať po: transform: translateX (100%);  

Nižšie uvidíte konečné demo.

Bonus: Nepovinná marža

Ak sa zobrazí .foo vedľa iných prvkov na stránke a chcete, aby tieto ďalšie prvky odsťahovať sa keď sa obrázok a jeho pozadie posúvajú von, potom pridajte pravý okraj s rovnakou šírkou ako .foo na .foo: hover element.

 .foo: vznášať margin-right: var (- dim);