Pubblicato il 05/04/18 - aggiornato il  | Nessun commento :

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:

effetto-salto

che può essere visualizzato online nella Demo seguente:



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

effetto-sbilenco

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).


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

effetto-testo

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.



È 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.

effetto-zoom

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:


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).





Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.