Come creare un effetto di sovrapposizione dell'immagine sul mouse?

L'inserimento di immagini semplici sulle pagine Web è un modo per migliorare il loro look, tuttavia, l'aggiunta di vari effetti alle immagini può abbellire ulteriormente le pagine Web e può creare una straordinaria esperienza utente. Una categoria interessante di effetti che puoi aggiungere alle immagini sono gli effetti di sovrapposizione. Questi effetti sono posizionati sopra le immagini e sono usati insieme a un effetto hover. Pertanto, appaiono solo quando l'utente porta il mouse all'immagine.

I tipi di effetti discussi in questo post sono.

1. Dissolvenza
2. Scivolo superiore
3. Scivola inferiore
4. Scivolo a sinistra
5. Scivola a destra

Impariamo come implementarli con l'aiuto di esempi.

Prima di saltare verso l'aggiunta di qualsiasi tipo di effetto di sovrapposizione delle immagini, inseriamo prima un'immagine nella nostra pagina web:

Html

Nel codice sopra, abbiamo creato due contenitori Div. Il primo contenitore div con la classe "Div" contiene l'immagine e un altro contenitore di div che manterrà l'effetto di sovrapposizione dell'immagine che si presenta quando l'utente si libra sull'immagine.

Produzione

Un'immagine è stata inserita correttamente sulla pagina web.

Ora che abbiamo incluso l'immagine impareremo come aggiungere i vari effetti di sovrapposizione dell'immagine indicati all'inizio dell'articolo.

Effetto di sovrapposizione di dissolvenza

Allo scopo di aggiungere un effetto di sovrapposizione di dissolvenza sull'immagine, seguire il codice seguente.

CSS

.Immagine
larghezza: 250px;
Altezza: 250px;

.div
Posizione: relativo;
larghezza: 450px;

.overlay
Posizione: assoluto;
Transizione: tutti 0.Facilità 4s;
opacità: 0;

.Div: Hover .overlay
opacità: 0.8;

.Fadeeffect
Altezza: 250px;
larghezza: 250px;
Top: 0;
A sinistra: 100px;
Background-color: Whitesmoke;

Prima di tutto stiamo impostando un po 'di larghezza e altezza dell'immagine, quindi regolando la posizione del primo contenitore di div come parente in modo da poter assolutamente posizionare il secondo contenitore di div che contiene l'effetto di sovrapposizione.

Dopo aver posizionato i due contenitori di div, stiamo usando la proprietà stenografia di transizione per dare un effetto di transizione a tutti gli elementi per una durata di 0.4 secondi in modo "facilità". Nel frattempo, l'opacità prima dell'effetto hover è stata impostata su 0, mentre, quando l'utente litiga l'opacità dell'effetto di sovrapposizione è stata impostata su 0.8.

Infine, stiamo dando un po 'di larghezza e altezza all'effetto di sovrapposizione di dissolvenza. La larghezza e l'altezza dell'immagine prima e dopo l'applicazione dell'overlay devono essere uguali in modo che l'effetto sia posizionato esattamente sopra l'immagine. Inoltre, abbiamo usato le proprietà superiore e sinistra per posizionare l'effetto esattamente sopra l'immagine e assegnarla un colore di fumo bianco.

Produzione

Un effetto di sovrapposizione di dissolvenza è stato implementato con successo.

Scivola l'effetto di overlay superiore

Considera il codice seguente per capire come aggiungere un effetto di sovrapposizione superiore a una diapositiva su un'immagine.

CSS

.Immagine
larghezza: 250px;
Altezza: 250px;

.div
Posizione: relativo;
larghezza: 450px;

.overlay
Posizione: assoluto;
Transizione: tutti 0.Facilità 4s;
opacità: 0;

.Div: Hover .overlay
opacità: 0.8;

.Slidetopeffect
larghezza: 250px;
Altezza: 0;
Top: 0;
A destra: 100px;
Background-color: Whitesmoke;

.Div: Hover .Slidetopeffect
Altezza: 250px;

Lo stile e la posizione dei contenitori di div e l'immagine sono la stessa fino a quando la regolazione dell'opacità dell'effetto hover.

Ai fini dell'aggiunta di un effetto di sovrapposizione superiore a scorrimento all'immagine, abbiamo impostato la larghezza dell'effetto di sovrapposizione uguale alla larghezza dell'immagine e di posizionarlo sopra l'immagine, abbiamo usato le proprietà in alto e giusto. Inoltre, per far scorrere l'effetto dall'alto, abbiamo regolato l'altezza dell'effetto di sovrapposizione a zero prima dell'effetto molare. Tuttavia, una volta che l'utente porta il mouse sull'immagine, l'altezza dell'effetto sarà la stessa di quella dell'immagine.

Produzione

Un effetto di sovrapposizione superiore a scorrimento creato con grande facilità.

Scivola l'effetto di sovrapposizione inferiore

Di seguito ti abbiamo fornito il codice con cui aggiungeremo un effetto di sovrapposizione inferiore della diapositiva sull'immagine.

CSS

.Immagine
larghezza: 250px;
Altezza: 250px;

.div
Posizione: relativo;
larghezza: 450px;

.overlay
Posizione: assoluto;
Transizione: tutti 0.Facilità 4s;
opacità: 0;

.Div: Hover .overlay
opacità: 0.8;

.SlideBottomeFect
Altezza: 0;
larghezza: 250px;
In basso: 3px;
A sinistra: 100px;
Background-color: Whitesmoke;

.Div: Hover .SlideBottomeFect
Altezza: 300px;

Il resto del codice è lo stesso utilizzato nell'esempio sopra, tuttavia, per posizionare l'effetto sulla parte superiore dell'immagine che abbiamo usato le proprietà in basso e destro e per far scorrere l'effetto dal basso stiamo assegnando la stessa altezza all'effetto come quello dell'immagine su Hover.

Produzione

L'effetto di sovrapposizione inferiore della diapositiva è stato aggiunto correttamente.

Scivola l'effetto di overlay a sinistra

Consultare il codice seguente per aggiungere un effetto di sovrapposizione a sinistra sulla diapositiva sull'immagine.

CSS

.Immagine
larghezza: 250px;
Altezza: 250px;

.div
Posizione: relativo;
larghezza: 450px;

.overlay
Posizione: assoluto;
Transizione: tutti 0.Facilità 4s;
opacità: 0;

.Div: Hover .overlay
opacità: 0.8;

.Slidelefteffect
Altezza: 250px;
larghezza: 0;
Top: 0;
A sinistra: 100px;
Background-color: Whitesmoke;

.Div: Hover .Slidelefteffect
larghezza: 250px;

Allo scopo di aggiungere un effetto di sovrapposizione a sinistra sulla diapositiva sull'immagine, abbiamo impostato l'altezza su 250px che è uguale all'altezza dell'immagine e della larghezza a 0px prima dell'effetto hover. Nel frattempo, per posizionare correttamente l'effetto sull'immagine che abbiamo usato le proprietà superiore e sinistra. E infine, dopo l'effetto hover, la larghezza è stata impostata su 250px che è la stessa della larghezza dell'immagine.

Produzione

L'effetto a sinistra della diapositiva funziona correttamente.

Scivola a destra Effetto di overlay

L'ultimo effetto di overlay che dimostreremo è l'effetto di sovrapposizione a destra della diapositiva. Segui il codice qui sotto.

CSS

.Immagine
larghezza: 250px;
Altezza: 250px;

.div
Posizione: relativo;
larghezza: 450px;

.overlay
Posizione: assoluto;
Transizione: tutti 0.Facilità 4s;
opacità: 0;

.Div: Hover .overlay
opacità: 0.8;

.SliderightEffect
Altezza: 250px;
larghezza: 0;
Top: 0;
A destra: 100px;
Background-color: Whitesmoke;

.Div: Hover .SliderightEffect
larghezza: 250px;

Per creare un effetto di overlay a destra della diapositiva sull'immagine, abbiamo assegnato alcuni valori in alto e le proprietà giuste nel frattempo mantenendo l'altezza dell'effetto di sovrapposizione uguale a quella dell'immagine e della larghezza dell'effetto su 0px prima dell'effetto hover. Tuttavia, quando si aggiunge l'effetto hover, la larghezza è stata regolata a 250 px in modo simile a quella dell'immagine.

Produzione

Un effetto di sovrapposizione a destra della diapositiva è stato aggiunto correttamente all'immagine.

Conclusione

Ai fini dell'aggiunta di effetti di sovrapposizione alle immagini è necessario posizionarle all'interno di un contenitore di div e utilizzare varie proprietà CSS per aggiungere effetti di sovrapposizione su di essi. L'aggiunta di questi effetti alle immagini può essere un modo interessante per migliorare la bellezza delle pagine web. Ci sono più effetti di overlay che puoi aggiungere alle tue immagini come, dissolvenza, scorrere in alto, scorrere a sinistra e scorrere a destra. Questi effetti possono essere aggiunti utilizzando varie proprietà CSS. Questo articolo dimostra come aggiungere vari effetti di sovrapposizione delle immagini su Hover con l'aiuto di esempi pertinenti.