Crea un effetto Reveal immagine solo CSS con bordi trasparenti
UN L'immagine solo CSS rivela l'effetto può essere risolto in diversi modi. In realtà è abbastanza facile codificare un design in cui il l'immagine risalta (è sorvolato da) il suo solido background -hai appena posiziona un'immagine su un elemento più piccolo con uno sfondo solido.
Puoi ottenere lo stesso risultato se lo usi confini trasparenti, dove tieni il la dimensione dell'elemento di sfondo è la stessa come quello del primo piano e aggiungere bordi trasparenti per crea uno spazio vuoto per il primo piano di traboccare in.
Ci sono alcuni vantaggi nell'utilizzo del secondo metodo. Dal momento che sono i bordi trasparenti a fornire l'area in cui il foreground deve essere traboccato, possiamo farlo controlla la direzione del trabocco tra i bordi sinistro, destro, superiore e inferiore. Inoltre, avendo le stesse dimensioni sia per il primo piano che per lo sfondo rende più facile spostare entrambi gli elementi contemporaneamente attraverso la pagina.
In poche parole, vedremo come crea un effetto di rivelazione di immagine solo CSS usare un più piccolo sfondo solido con un immagine in primo piano con bordi trasparenti. Puoi controllare il demo finale sotto.
1. Creare il codice iniziale
HTML-saggio, solo uno Nel CSS, usiamo due variabili CSS, Aggiungiamo anche il Noi aggiungi un vuoto Il Aggiungiamo l'immagine al Il Sul screenshot qui sotto puoi vedere quello che abbiamo finora ( Per aggiungere il più piccolo (slide-out) dietro l'immagine, useremo l'altro pseudo-elemento, Creiamo un'altra variabile CSS, Il larghezza è calcolato come Il altezza è calcolato come Con il Un filtro CSS di Ecco il screenshot della demo reso finora (con Noi Aggiungi il Come noi già aggiunto il Sotto, puoi vedere il demo finale. Se si visualizza
--BGC e --offuscare per il colore di sfondo e il dimensioni del .foo contenitore, rispettivamente. Nell'esempio, ho usato il stesso valore per la larghezza e l'altezza per ottenere una scatola quadrata, creare variabili separate per l'altezza e la larghezza se vuoi un rettangolo.position: relative regola a .foo, in modo che i suoi pseudo-elementi, che useremo per rivelando l'immagine, può essere assolutamente posizionato (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;
soddisfare proprietà ad entrambi gli pseudo-elementi, .foo :: prima e .foo :: dopo, per ottenerli correttamente resi. .foo :: before, .foo :: after content: "; position: absolute; left: 0; top: 0;
.foo elemento, i suoi due pseudo-elementi, .foo :: prima, .foo :: dopo, e il loro : hover pseudo-classi prendi un transizione proprietà quello sarà aggiungi una transizione easy-in a loro per 500 millisecondi (mezzo secondo). .foo, .foo: hover, .foo :: before, .foo :: after, .foo: hover :: before, .foo: hover :: after transition: transform 500ms ease-in;
2. Aggiungi l'immagine
.foo :: prima pseudo-elemento come immagine di sfondo, e dimensionalo per coprire l'intero pseudo-elemento con il larghezza e altezza proprietà. Noi impilarlo proprio sotto il .foo elemento usando il z-index: -1 regola. .foo :: before width: 100%; altezza: 100%; background: url (camel.png) centro / copertina; z-index: -1;
centro parola chiave centra l'immagine, mentre il copertina parola chiave ridimensiona l'immagine coprire l'intero elemento pur mantenendo le proporzioni. z-index viene rimosso da .foo :: prima in modo che possa essere visto):
3. Aggiungi lo sfondo slide-out
.foo :: dopo.--B, per il larghezza del bordo. Noi diamo tre bordi trasparenti al ::dopo pseudo-elemento: in alto, a destra e in basso. .foo :: after --b: 20px; larghezza: calc (100% - var (- b)); altezza: calc (100% - calc (var (- b) * 2)); border: var (- b) solido trasparente; border-left: none; box-shadow: inset 0 var (- dim) 0 var (- bgc); filtro: luminosità (.8); z-index: -2;
calc (100% - var - b)) che ritorna la larghezza totale di .foo meno la larghezza totale dei suoi bordi orizzontali (solo bordo destro, dato che non c'è il bordo sinistro).calc (100% - calc (var (- b) * 2)) che ritorna l'altezza totale di .foo meno la larghezza totale dei suoi bordi verticali (bordi superiore e inferiore).box-ombra proprietà, anche noi aggiungi un'ombreggiatura orizzontale della dimensione uguale a .foo (che è var (- dim)).luminosità (.8) scurisce il colore di sfondo un po ', e infine, il z-index: -2 regola pone il ::dopo pseudo-elemento sotto ::prima che contiene l'immagine.z-index rimosso da entrambi gli pseudo-elementi in modo che possano essere visti):
4. Aggiungi la trasformazione
trasformare proprietà ai due pseudo-elementi, quindi quando l'utente passa sopra .foo, entrambi gli pseudo-elementi sono spostato orizzontalmente.transizione proprietà 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%);
Bonus: margine opzionale
.foo accanto ad altri elementi su una pagina e desideri questi altri elementi vai via quando l'immagine e il suo sfondo scivolano fuori, allora aggiungere un margine destro della stessa larghezza di quello di .foo al .pippo: hover elemento. .foo: hover margin-right: var (- dim);
