Effetti speciali per le immagini - Parte prima

Come mostrare immagini con effetti speciali al passaggio del cursore utilizzando solo il linguaggio CSS, pubblicabili in qualsiasi piattaforma o pagina web

Con questo post inauguro una rassegna di alcuni effetti speciali piuttosto semplici da applicare alle foto e che possono essere implementati in tutte le tipologie delle pagine web. Non so ancora se i post dedicati a questo argomento saranno solo due o di più; in ogni caso alla fine degli articoli metterò i link per consultare gli altri post che ho pubblicato sullo stesso tema.

In questo primo articolo mi occuperò solo degli effetti creati con l'ausilio del CSS3 mentre nei post successivi mostrerò anche effetti generati da javascript, sempre molto semplici, e che saranno attivati non solo dal passaggio del mouse sulle foto ma anche da eventi click o doppio click.

I codici di questi effetti sono autosufficienti e possono essere incollati così come sono in qualsiasi pagina web. La prima parte del codice è il CSS compreso tra i due tag <style> e </style> mentre la seconda non è altro che il codice HTML che riprende la classe definita all'interno dei tag style.

Chi volesse utilizzare questi codici molto spesso, può incollare la prima parte del codice, senza i tag <style>,  nel Tema per poi inserire solo la seconda parte nei post, quando occorra. Gli utenti di Blogger possono incollare tale codice subito sopra alla riga ]]></b:skin> per poi salvare il Tema.

Le immagini di test che ho utilizzato sono quelle casuali offerte dal sito LoremPixel, che ovviamente debbono essere sostituite dalle immagini di chi volesse utilizzare questi codici. 

1) EFFETTO SALTO

Si tratta di un effetto utile quando in una pagina web vengono mostrate più immagini allineate. Con questo effetto, passandoci sopra con il cursore, avranno uno spostamento verso l'alto. Il codice da usare è il seguente:

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

che produce questo risultato:



che può essere visualizzato online nella Demo seguente:

Demo Clicca qui

Si può personalizzare la dimensione del salto (2px), lo stile del bordo e la durata della transizione (0.5s).

2) EFFETTO SBILENCO

Quando si passa sopra a una foto con il mouse questa ruota 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;
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
transition: all 0.5s ease;
}
  #sbilenco img:hover {
transform: rotate(-7deg);
}
</style>
<div id="sbilenco">
    <img src="https://lorempixel.com/200/200/"/>
    <img src="https://lorempixel.com/200/200/"/>
    <img src="https://lorempixel.com/200/200/"/>
    <img src="https://lorempixel.com/200/200/"/>
    <img src="https://lorempixel.com/200/200/"/>
    <img src="https://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).

Demo Clicca qui

Per rotazioni orarie occorre mettere il segno positivo.

3) EFFETTO DEL TITOLO CHE APPARE AL PASSAGGIO DEL CURSORE

Quando si passa con il mouse sopra una foto, questo effetto ne mostra il testo del titolo o della descrizione



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;
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="https://lorempixel.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 (Georgia)e al colore della scritta personalizzabile. La durata dell'effetto proposta è di 0.5 secondi.

Demo Clicca qui

È anche possibile impostare la distanza tra immagine e testo e la larghezza totale.

4) EFFETTO ZOOM

Al passaggio del mouse aumentano le dimensioni delle foto.



Il codice da utilizzare è il seguente

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

La Demo mostra come funziona:

Demo Clicca qui

Le personalizzazioni riguardano la dimensione iniziale delle foto (300x100 pixel) e quella al passaggio del cursore (400x150 pixel). La durata della transizione è stata settata in un secondo.

5) IMMAGINI CIRCOLARI RUOTANTI

Con questo effetto si fanno diventare circolari tutte le immagini e verranno ruotate di 360 gradi al passaggio del mouse. Passate il cursore su questa foto per testare l'effetto.

Il codice da usare è il seguente:

<style type="text/css">
.circolare {
   width: 300px;
   height: 300px;
   border-radius:999em;
transition-duration: 1s;
transition-property: transform;
overflow:hidden;
}
.circolare:hover {
transform:rotate(360deg);
}
</style>
<div align="center">
<img class="circolare" src="https://lh6.googleusercontent.com/-YpxWCbR9vzI/UT7zfsRZYrI/AAAAAAAAgys/bbbzu3UuIas/s912/natura4.jpg"/></div>

in cui si può impostare la dimensione della immagine e la durata della transizione (1 secondo).

Leggi anche: Effetti speciali per immagini - Seconda parte