Crea un effetto Reveal immagine solo CSS con bordi trasparenti

è richiesto:

Nel CSS, utilizziamo due variabili CSS, --bgc e --dim per il colore di sfondo e le dimensioni del contenitore .foo, rispettivamente. Nell'esempio, ho usato lo stesso valore per la larghezza e l'altezza per ottenere una scatola quadrata, creare variabili separate per l'altezza e la larghezza se si desidera un rettangolo.

Aggiungiamo anche la position:relative regola position:relative a .foo, in modo che i suoi pseudo-elementi, che useremo per rivelare l'immagine, possano essere posizionati in modo assoluto (vedi sotto), e quindi impilati l'uno sull'altro .

 .foo {--bgc: # FFCC03; --dim: 300px; larghezza: var (- dim); altezza: var (- dim); background-color: var (- bgc); posizione: relativa; } 

Aggiungiamo una proprietà di content vuota a entrambi gli pseudo-elementi, .foo::before e .foo::after, per renderli correttamente visualizzati.

 .foo :: before, .foo :: after {content: ''; posizione: assoluta; a sinistra: 0; inizio: 0; } 

L'elemento .foo, i suoi due pseudo-elementi, .foo::before, .foo::after, e le loro pseudo-classi :hover ottengono una proprietà di transition che aggiungerà una transizione di facilità a loro per 500 millisecondi (mezzo a secondo).

 .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after {transition: transform 500ms ease-in; } 

2. Aggiungi l'immagine

Aggiungiamo l'immagine allo pseudo-elemento .foo::before come immagine di sfondo e la ridimensioniamo per coprire l'intero pseudo-elemento con le proprietà width e height . Lo .foo direttamente sotto l'elemento .foo usando la regola z-index: -1 .

 .foo :: before {width: 100%; altezza: 100%; background: url (camel.png) centro / copertina; z-index: -1; } 

La parola chiave center centra l'immagine, mentre la parola chiave di cover scala l'immagine per coprire l'intero elemento mantenendo le sue proporzioni.

Nello screenshot qui sotto puoi vedere cosa abbiamo finora ( z-index viene rimosso da .foo::before modo che possa essere visto):

3. Aggiungi lo sfondo slide-out

Per aggiungere lo sfondo più piccolo (slide-out) dietro l'immagine, useremo l'altro pseudo-elemento, .foo::after .

Creiamo un'altra variabile CSS, --b, per la larghezza del bordo . Diamo tre bordi trasparenti allo pseudo-elemento ::after : top, right e bottom .

 .foo :: after {--b: 20px; larghezza: calc (100% - var (- b)); altezza: calc (100% - calc (var (- b) * 2)); bordo: var (- b) trasparente solido; border-left: none; box-shadow: inset 0 var (- dim) 0 var (- bgc); filtro: luminosità (.8); z-index: -2; } 

La larghezza viene calcolata come calc(100% - var--b)) che restituisce la larghezza totale di .foo meno la larghezza totale dei suoi bordi orizzontali (solo il bordo destro, poiché non c'è il bordo sinistro).

L' altezza viene calcolata come calc(100% - calc(var(--b) * 2)) che restituisce l'altezza totale di .foo meno la larghezza totale dei suoi bordi verticali ( bordi superiore e inferiore).

Con la proprietà box-shadow, aggiungiamo anche un'ombreggiatura orizzontale della dimensione uguale a .foo (che è var(--dim) ).

Un filtro CSS di brightness(.8) scurisce un po 'il colore di sfondo, e infine, la regola z-index: -2 posiziona lo pseudo-elemento ::after sotto ::before che contenga l'immagine.

Ecco lo screenshot della demo renderizzata finora (con z-index rimosso da entrambi gli pseudo-elementi in modo che possano essere visti):

4. Aggiungi la trasformazione

Aggiungiamo la proprietà transform ai due pseudo-elementi, quindi quando l'utente si posiziona su .foo, entrambi gli pseudo-elementi vengono spostati orizzontalmente .

Poiché abbiamo già aggiunto la proprietà di transition a tutti gli elementi alla fine del passaggio 1, il movimento dell'immagine e il suo sfondo sono entrambi animati .

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

Di seguito, puoi vedere la demo finale .

Bonus: margine opzionale

Se visualizzi .foo accanto ad altri elementi in una pagina e desideri che questi altri elementi si spostino quando l'immagine e il suo sfondo scivolano fuori, quindi aggiungi un margine destro della stessa larghezza di quello di .foo .foo:hover .

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