Utwórz efekt ujawnienia obrazu tylko w CSS za pomocą przezroczystych granic

W CSS używamy dwie zmienne CSS, --bgc i --ciemny dla kolor tła i wymiary z .bla odpowiednio pojemnik. W przykładzie użyłem ta sama wartość aby uzyskać szerokość i wysokość, aby uzyskać prostokątne pudełko, utwórz oddzielne zmienne dla wysokości i szerokości, jeśli chcesz prostokątny.

Dodajemy również pozycja: względna reguła do .bla, tak że jego pseudoelementy, do których będziemy używać ujawniając obraz, może być absolutnie ustawiony (patrz poniżej), a więc ułożone jedna na drugiej.

 .foo --bgc: # FFCC03; --dim: 300px; szerokość: var (- dim); wysokość: var (- dim); kolor tła: var (- bgc); pozycja: względna;  

My dodaj pusty zawartość własność do obu pseudoelementów, .foo :: wcześniej i .foo :: after, aby je poprawnie renderować.

 .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0; 

The .bla element, jego dwa pseudoelementy, .foo :: wcześniej, .foo :: after, i ich :wahać się pseudoklasy Weź przejście własność to będzie dodaj łatwość przejścia do nich przez 500 milisekund (pół sekundy).

 .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after przejście: przekształć łatwość 500ms;  

2. Dodaj obraz

Dodajemy obraz do .foo :: wcześniej pseudoelement jako obraz tła, i Rozmiar, aby pokryć cały pseudoelement z szerokość i wysokość nieruchomości. My układaj go tuż pod .bla element używając z-index: -1 reguła.

 .foo :: before width: 100%; wysokość: 100%; background: url (camel.png) centrum / okładka; z-index: -1;  

The środek słowo kluczowe wyśrodkowuje obraz, podczas, gdy pokrywa słowo kluczowe skaluje obraz do zakryj cały element zachowując proporcje.

Na zrzut ekranu poniżej widać, co mamy do tej pory (indeks Z jest usunięty z .foo :: wcześniej tak, aby można go było zobaczyć):

3. Dodaj wysuwane tło

Aby dodać mniejsze (wysuwane) tło za obrazem, użyjemy drugiego pseudoelementu, .foo :: after.

Tworzymy kolejną zmienną CSS, --b, dla szerokość granicy. Dajemy trzy przezroczyste granice do ::po pseudoelement: góra, prawo i dół.

 .foo :: after --b: 20px; width: calc (100% - var (- b)); wysokość: calc (100% - calc (var (- b) * 2)); border: var (- b) solid transparent; border-left: none; box-shadow: wstawka 0 var (- dim) 0 var (- bgc); filtr: jasność (.8); z-index: -2;  

The szerokość jest obliczany jako calc (100% - var - b)) to wraca całkowita szerokość .bla minus całkowita szerokość jej granic poziomych (tylko prawa granica, ponieważ nie ma lewej granicy).

The wysokość jest obliczany jako calc (100% - calc (var (- b) * 2)) to wraca całkowita wysokość .bla minus całkowita szerokość jej pionowych granic (górne i dolne granice).

Z box-shadow nieruchomości, my też dodaj poziomy cień wielkości takiej samej jak .bla (który jest var (- dim)).

Filtr CSS jasność (.8) przyciemnia kolor tła trochę i na koniec indeks Z: -2 reguła umieszcza ::po pseudoelement pod spodem ::przed który zawiera obraz.

Tutaj jest zrzut ekranu demo wydane do tej pory (z indeks Z usunięte z obu pseudoelementów, aby były widoczne):

4. Dodaj transformację

My Dodaj przekształcać własność do dwóch pseudoelementów, a więc kiedy użytkownik się nad nim unosi .bla, oba pseudoelementy są przesunięty poziomo.

Jak my już dodałem przejście własność do wszystkich elementów na końcu kroku 1 ruch obrazu i jego tła są oba animowane.

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

Poniżej możesz zobaczyć końcowe demo.

Bonus: opcjonalny margines

Jeśli wyświetlasz .bla obok innych elementów na stronie i chcę, aby te inne elementy były odejść kiedy obraz i jego tło wysuwają się, wtedy dodaj prawy margines o tej samej szerokości co szerokość .bla do .foo: hover element.

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