5 Effetti per immagini ottenuti con il solo CSS.

Semplici effetti per immagini usando solo HTML e CSS da applicare direttamente in un articolo, nel modello (Blogger) o tema (Wordpress).

Continuo la presentazione di effetti per immagini che possono essere inseriti in modo semplice nei nostri blog direttamente nel modello oppure soltanto in uno o più post o pagine statiche. Il precedente articolo che illustrava alcuni Effetti delle Foto ha avuto un buon numero di Mi Piace e di condivisioni che mi hanno consigliato di presentare altri effetti in questo nuovo post. Questi sono ancora più semplici dei precedenti perché abbisognano solo del linguaggio CSS senza javascript.

Il codice di ciascun effetto sarà suddiviso in due parti. La prima che inizia con <style> e finisce con </style> può essere incollata direttamente nell'articolo in modalità HTML oppure inserita nel modello subito sopra a </head>. La seconda parte che è formata dal codice HTML deve invece essere incollata nel punto della pagina in cui si vogliono visualizzare le immagini. Se si è optato per la prima parte del codice nel modello si potrà inserire lo stesso effetto in tutte le pagine del blog semplicemente usando la seconda parte del codice.

EFFETTO SALTO

È utile quando si abbia una serie di immagini allineate visto che quando ci si passa sopra con il mouse si vede uno spostamento verso l'alto di valore personalizzabile che produce un effetto onda

Il codice da usare è il seguente

<style>
.salto img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.salto img:hover { margin-top: 2px; }
</style>
<div id="salto" class="salto">
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
<img src="http://lorempixel.com/150/150/"/>
  </div>

Oltre allo spostamento (2 pixel) è possibile personalizzare anche la durata del salto (0.5 secondi).

EFFETTO SBILENCO

Con il mouse si provoca una piccola rotazione nelle immagini in senso orario o antiorario

Il codice da usare è il seguente

<style>
#sbilenco { width: 800px; margin: 0 auto; } #sbilenco img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #sbilenco img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
</style>
<div id="sbilenco">
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
</div>

Possono essere personalizzate la larghezza della serie di foto (800 pixel), lo stile del bordo delle immagini con il relativo grado di opacità e ombreggiatura. Si possono anche settare la durata dell'effetto (0.5 secondi) e i gradi della rotazione delle foto (-7 gradi).

EFFETTO TITOLO CHE APPARE

Al passaggio del mouse si visualizza il titolo della foto che viene mostrato alla sua destra

Il codice da usare è il seguente

<style>
#titolo {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "Georgia";
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#titolo:hover {
line-height: 133px;
color: #191919;
}
#titolo img{
float: left;
margin: 0 15px;
}
</style>
<div id="titolo">
   <img src="http://lorempixum.com/400/133"/><p>Testo</p>
</div>

Si possono settare le dimensioni della foto e quelle dei caratteri del titolo oltre anche alla famiglia di font e al colore della scritta personalizzabile. La durata dell'effetto proposta è di 0.5 secondi.

EFFETTO ZOOM

Al passaggio del mouse si assiste a un aumento delle dimensioni delle immagini

Il codice da usare è il seguente

<style>
.container {
width: 300px;
margin: 0 auto;
}
#zoom img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#zoom img:hover {
height: 150px;
width: 400px;
margin-left:-50px;
}
</style>
<div class="container" id="zoom">
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
<img src="http://lorempixel.com/400/133/"/>
</div>

L'effetto dura 1 secondo e le immagini vengono trasformate da 100 pixel di altezza e 300 pixel di larghezza rispettivamente a 150 e 400 pixel. Da notare che è stato inserito anche un rientro a sinistra di 50 pixel per mantenere le immagini allineate.

EFFETTO DISSOLVENZA

Al passaggio del mouse vengono mostrati bagliori e riflessi

Il codice da usare è il seguente

<style>
#fadein { width: 700px; margin: 0 auto; min-height: 300px; } #fadein img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transizione*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Riflesso*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #fadein img:hover { opacity: 1; /*Riflesso*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Bagliore*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }
</style>
<div id="fadein">
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
   <img src="http://lorempixel.com/200/200/"/>
</div>

Anche in questo ultimo effetto oltre a sostituire gli indirizzi delle immagini si possono personalizzare gli stessi parametri che riguardano la durata della transizione, i colori, l'opacità e l'ombreggiatura.