Sviluppatore web, appassionato Apple e di social media

18 ottobre 2016 | Sviluppo web

DI RICCARDO BANFI

CSS: 10 facili effetti di immagini al passaggio del mouse

In questo articolo troverai 10 esempi di immagini al passaggio del mouse facili da usare, con demo, codice HTML e CSS pronti per essere copiati

Spesso diamo poca importanza al modo in cui mostriamo delle semplici anteprime nei nostri siti web... peccato, perché con poche righe di codice HTML e CSS (e nessun appesantimento o rallentamento nel caricamento della pagina), i risultati sono davvero belli!

Diamo una sbirciata

Prima di cominciare diamo un'occhiata agli effetti che potrai trovare in questo articolo, prova la demo! P.S. le immagini utilizzate, nell'ordine in cui le visualizzi, sono i 10 monumenti più visitati d'Italia!

CSS: 10 facili effetti di immagini al passaggio del mouse

10 semplici effetti CSS sulle immagini

Primo passo per poter facilmente integrare questi effetti nel tuo foglio di stile CSS è aggiungere questa parte di codice:

CSS

* {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
}

body {
      background-color: #2e3235
}

.pic {
      border: 5px solid #717377;
      float: left;
      height: 300px;
      width: 300px;
      margin: 20px;
      overflow: hidden;
}

La maggior parte di questo codice sono cose di base che puoi tranquillamente cambiare a tuo piacimento, ricorda solo che se modifichi i parametri width e height della classe .pic dovrai utilizzare delle immagini dalle dimensioni adeguate alla tua scelta. Ora ti elenco i vari effetti utilizzati e i relativi snippet di codice HTML e CSS.


Effetto zoom

Questo effetto gioca sulle dimensioni dell'immagine visualizzata nel riquadro e grazie alla transizione a tempo crea l'effetto zoom. L'immagine utilizzata è 400 x 400.

HTML

<div class="zoom pic">
      <img src="img/basilica-di-san-pietro.jpg" alt="Basilica di San Pietro">
</div>


CSS

/*ZOOM*/
.zoom img {
      height: 300px;
      width: 300px;

      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.zoom img:hover {
      width: 400px;
      height: 400px;
}


Effetto pan

Questo effetto gioca sulle dimensioni dell'immagine visualizzata nel riquadro e grazie alla transizione a tempo crea l'effetto panoramica (il contrario di zoom). L'immagine utilizzata è 400 x 400.

HTML

<div class="pan pic">
      <img/san-gimignano.jpg" alt="San Gimignano">
</div>


CSS

/*PAN*/
.pan img {
      height: 400px;
      width: 400px;

      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.pan img:hover {
      width: 300px;
      height: 300px;
}


Effetto sidepan

Questo effetto gioca sulle dimensioni dell'immagine visualizzata nel riquadro e grazie al margine sinistro e alla transizione a tempo crea l'effetto di panoramica orizzontale. L'immagine utilizzata è 600 x 300.

HTML

<div class="sidepan pic">
      <img/musei-vaticani.jpg" alt="Musei Vaticani">
</div>


CSS

/*SIDEPAN*/
.sidepan img {
      margin-left: 0px;
      -webkit-transition: margin 1s ease;
      -moz-transition: margin 1s ease;
      -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
      transition: margin 1s ease;
}

.sidepan img:hover {
      margin-left: -200px;
}


Effetto verticalpan

Come per il sidepan, anche questo effetto gioca sulle dimensioni dell'immagine visualizzata nel riquadro e al margine (questa volta superiore). Grazie poi alla transizione a tempo crea l'effetto di panoramica verticale. L'immagine utilizzata è 300 x 600.

HTML

<div class="verticalpan pic">
      <img/duomo-monreale.jpg" alt="Duomo di Monreale">
</div>


CSS

/*VERTICALPAN*/
.verticalpan img {
      margin-top: 0px;
      -webkit-transition: margin 1s ease;
      -moz-transition: margin 1s ease;
      -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
      transition: margin 1s ease;
}

.verticalpan img:hover {
      margin-top: -200px;
}


Effetto tilt

Tutto quello che fa questo effetto CSS è ruotare lentamente l'immagine di 10 gradi (personalizzabile). L'immagine utilizzata è 300 x 300.

HTML

<div class="tilt pic">
      <img/colosseo.jpg" alt="Colosseo">
</div>


CSS

/*TILT*/
.tilt {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

.tilt:hover {
      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
}


Effetto morph

Forse l'effetto con più impatto di tutti: mentre l'immagine ruota velocemente di 360°, i bordi si smussano completamente dando così l'effetto di trasformazione da quadrato a cerchio. L'immagine utilizzata è 300 x 300.

HTML

<div class="morph pic">
      <img/santa-maria-del-fiore.jpg" alt="Santa Maria del Fiore">
</div>


CSS

/*MORPH*/
.morph {
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
      transition: all 0.5s ease;
}

.morph:hover {
      border-radius: 50%;
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
}


Effetto focus

Simula l'obiettivo di una camera che mette a fuoco: mentre il bordo diventa spesso 70px, si smussa completamente. L'immagine utilizzata è 300 x 300.

HTML

<div class="tilt pic">
      <img/palazzo-ducale.jpg" alt="Palazzo Ducale">
</div>


CSS

/*FOCUS*/
.focus {
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.focus:hover {
      border: 70px solid #000;
      border-radius: 50%;
}


Effetto unblur

Semplicemente giocando con il parametro blur, questo effetto mette a fuoco un'immagine sfocata. L'immagine utilizzata è 300 x 300.

HTML

<div class="unblur pic">
      <img/basilica-di-san-marco.jpg" alt="Basilica di San Marco">
</div>


CSS

/*UNBLUR*/
.unblur img {
      -webkit-filter: blur(5px);
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.unblur img:hover {
      -webkit-filter: blur(0px);
}


Effetto color

Come puoi intuire dal nome ho settato il greyscale dell'immagine a 100% per poi abbassarlo a zero al passaggio del mouse. L'immagine utilizzata è 300 x 300.

HTML

<div class="color pic">
      <img/duomo-di-siena.jpg" alt="Duomo di Siena">
</div>


CSS

/*COLOR*/
.color {
      -webkit-filter: grayscale(100%);
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.color:hover {
      -webkit-filter: grayscale(0%);
}


Effetto brighten

Come per l'effetto precedente, al posto di giocare con la scala dei grigi ho impostato la luminosità al 50% sull'immagine per poi portarla al massimo al passaggio del mouse. L'immagine utilizzata è 300 x 300.

HTML

<div class="brighten pic">
      <img/certosa-di-pavia.jpg" alt="Certosa di Pavia">
</div>


CSS

/*BRIGHTEN*/
.brighten img {
      -webkit-filter: brightness(50%);
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
}

.brighten img:hover {
      -webkit-filter: brightness(100%);
}


In conclusione, la mia opinione è che si possono realizzare svariati effetti di valore con CSS3 e i suoi parametri, senza appesantire le pagine. Parte di questi sono stati liberamente ispirati (o copiati e a volte modificati) dall'articolo che cito qui sotto nella fonte.



Fonte: Design Shack