10 effetti immagine al passaggio del mouse facili da copiare e incollare

Gli effetti al passaggio del mouse sono sempre un argomento divertente da esplorare. In passato, abbiamo creato alcuni fantastici esempi di hover CSS facili da copiare e incollare nel tuo codice.

Oggi lo seguiremo con dieci nuovi effetti appositamente creati per l'uso con le immagini. Ogni esempio viene fornito con uno snippet HTML e CSS che puoi rubare e una demo live in modo che tu possa vederlo in azione.

Sbirciata

Prima di iniziare, dai un'occhiata alla demo qui sotto per vedere tutti i vari effetti al passaggio del mouse che creeremo.

demo: Clicca qui per il lancio.

Impostare

Prima di iniziare a creare le singole demo, è necessaria una configurazione di base. Ecco una porzione di CSS che useremo per dettare l'aspetto di base di tutti gli esempi.

* {-webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; -ms-box-dimensionamento: border-box; dimensionamento della scatola: border-box; } body {background: # 333; } .pic {border: 10px solid #fff; fluttuare: a sinistra; altezza: 300 px; larghezza: 300 px; margine: 20px; overflow: nascosto; -webkit-box-shadow: 5px 5px 5px # 111; box-shadow: 5px 5px 5px # 111; }

La maggior parte di questo è roba di base: il dimensionamento della scatola ci consente di manipolare il modello della scatola (sentitevi liberi di applicare più specificatamente se non vi piace il selettore universale), e la classe pic ci dà un posto dove lanciare alcuni stili generici per ogni foto

Zoom e panoramica

Il nostro primo gruppo di effetti prevede l'utilizzo di alcuni trucchi con overflow nascosto. Ritagliando l'immagine ai limiti di un div, possiamo tirare fuori delle alate piuttosto belle.

Ecco una demo dei quattro effetti hover in azione:
demo: Clicca qui per il lancio.

Crescere

Per iniziare, faremo in modo che quando l'utente passa sopra l'immagine, la foto si ingrandisce rimanendo comunque entro i suoi limiti, producendo un effetto di zoom. Ecco l'HTML.

HTML

<img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_4.jpg"> <p>Abbiamo visto come far crescere un'immagine al passaggio del mouse, quindi invertiamo l'effetto e ingrandiamo la foto. Il metodo è praticamente lo stesso, solo che questa volta inizierai con la dimensione a 400px e ridurla a 300px al passaggio del mouse. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_5.jpg"> <p>L'effetto successivo mantiene l'immagine delle stesse dimensioni, ma la sposta lateralmente mentre l'utente si libra. Come puoi vedere nel nostro esempio di calci, questo è un ottimo modo per trasmettere un senso di azione.</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_6.jpg"> <p>Un piatto verticale può essere anche bello. Ancora una volta, userò questo effetto per trasmettere un senso di movimento, ma questo è anche ottimo per comunicare l'altezza se vuoi mettere in scena qualcosa come un edificio alto. La scogliera nella nostra foto aiuta a spingere questo concetto. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_7.jpg"> <h3>Inclinazione</h3> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_8.jpg"> <p>Questo è semplicissimo, tutto ciò che faremo è ruotare leggermente l'immagine quando l'utente si posiziona su di esso. Il risultato è un'illusione semplice ma divertente di un'immagine appesa storta. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_9.jpg"> <p>È qui che arriva il matto. L'immagine qui sopra non rende giustizia a questo, quindi assicurati di dare un'occhiata alla demo. Quello che succede è che, quando l'utente si libra, l'immagine inizia a girare. Mentre gira, si trasforma da un quadrato in un cerchio. Il risultato è super divertente con cui giocare. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_10.jpg"> <p>Ecco un altro strano che usa il raggio del bordo per arrotondare l'immagine. Questa volta però, non solo aumenteremo il raggio del bordo ma anche il suo spessore. Combinato con il <em>border-box</em>, questo creerà un effetto che si concentra su una particolare parte di un'immagine. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_11.jpg"> <h3>blur</h3> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_12.jpg"> <p>Il primo effetto che stiamo facendo è una semplice sfocatura. A lungo l'uomo ha cercato di sfocare i pixel con il solo CSS e ora è finalmente possibile con una piccola riga di codice!</p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_13.jpg"> <p>Questa volta elimineremo tutta la saturazione dell'immagine al passaggio del mouse. Era solito scattare due immagini per ottenere questo effetto, ma con i filtri Webkit, possiamo ridurlo a uno. </p> <p><strong>HTML</strong></p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/images_1/10-easy-image-hover-effects-you-can-copy-and-paste_14.jpg"> <p>Per il nostro trucco finale, scuriremo una foto per impostazione predefinita, quindi la illumineremo fino al suo stato normale al passaggio del mouse. Questo crea una sorta di effetto rivelatore. </p> <textarea wrap="soft" readonly=""> <img src="//lesptitesaffairesdemayl.be/img/http://lorempixel.com/300/300/technics/2"> / * DARKEN * / .brighten img {-webkit-filter: luminosità (-65%); -webkit-transition: tutti 1s facili; -moz-transizione: tutti 1s facilità; -o-transizione: tutti 1s facilità; -ms-transition: tutti 1s facili; transizione: tutti 1s facilità; } .brighten img: hover {-webkit-filter: luminosità (0%); }

Qui, lo 0% è una luminosità regolare. Qualunque cosa al di sopra di questo e tu rallegri l'immagine, qualsiasi cosa sotto e la oscuri. Abbiamo iniziato a -65% e lo abbiamo portato fino allo 0% al passaggio del mouse.

Rubali!

Gli esempi di cui sopra sono tutti pensati per rubare e utilizzare come farai nel tuo lavoro, quindi assicurati di aggiungere questa pagina ai segnalibri e tornare ad essa la prossima volta che stai cercando un interessante effetto hover CSS.