Pubblicato il 06/09/13e aggiornato il

I più belli e semplici effetti per immagini.

Semplici effetti per immagini ottenuti solo con HTML e CSS e senza usare librerie esterne.
Gli articoli di un blog hanno bisogno di avere almeno una foto non solo per questioni estetiche per ravvivare con un tocco di colore un layout altrimenti con solo testo ma anche per una precisa esigenza SEO. Sembra infatti certo che a parità di altri fattori, le pagine che abbiano contenuti multimediali vengano preferite nelle SERP di Google. Certo bisogna anche fare attenzione a non appesantire troppo la velocità di caricamento della pagina per la stessa ragione ma in rete ci sono strumenti di ottimizzazione adeguati e gratuiti.

La presentazione di foto con effetti particolari renderà la pagina web ancora più interessante per i lettori. Gli effetti più complicati hanno bisogno di librerie javascript apposite come JQuery, Prototype & Script.aculo.us o MooTools. Si possono però anche creare effetti interessanti solo con l'ausilio di codice HTML e CSS. In questo blog ne ho presentati diversi che adesso vado a riepilogare.

MOSTRARE UN'ALTRA FOTO AL PASSAGGIO DEL MOUSE

Il codice è il seguente

<img src="URL PRIMA IMMAGINE" onmouseover="this.src='URL SECONDA IMMAGINE';" onmouseout="this.src='URL PRIMA IMMAGINE';" title="TITOLO" alt="TESTO ALTERNATIVO"/>

e l'effetto è questo

uccelli

Altri effetti ottenuti secondo la stessa falsariga possono essere trovati in questo articolo.

EFFETTO TRASPARENZA E OPACITA'

Usando questo codice

<img src="https://lh6.googleusercontent.com/-NIkNwnKIEuw/ULD0DqOfFfI/AAAAAAAAc0Q/Ph5dAQeCtq8/s250/vista-cespugli.jpg"alt="strada campestre" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" onmouseout="this.style.opacity=1.0;this.filters.alpha.opacity=100" />

si mostra una foto che si opacizzerà al passaggio del cursore in questo modo

strada campestre

Si può anche ottenere l'effetto contrario con quest'altro codice

<img src="https://lh6.googleusercontent.com/-NIkNwnKIEuw/ULD0DqOfFfI/AAAAAAAAc0Q/Ph5dAQeCtq8/s250/vista-cespugli.jpg"alt="strada campestre" onmouseover="this.style.opacity=1.0;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" />

che produce questo risultato

strada campestre

IMMAGINI GRIGE CHE SI COLORANO CON IL CURSORE

Questo effetto funziona solo con i browser Chrome e Firefox. Ci sono effetti simili che funzionano anche con Internet Explorer. Se ne può sapere di più leggendo questo post. Il codice seguente

<style type="text/css">
img.grayscale2 {
-webkit-filter: grayscale(100%);
-webkit-transition: -webkit-filter 0.2s;
}
img.grayscale2:hover {
-webkit-filter: grayscale(0%);
}
</style>
<img class="grayscale2"
src="URL_IMMAGINE"/>

produce questo risultato



COME INGRANDIRE LE IMMAGINI AL PASSAGGIO DEL MOUSE

Usando questo codice di base

<style>
.dimensione {
transition-duration: 1s;
-ms-transition-duration: 1s;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-property: transform;
-ms-transition-property: -ms-transform;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
overflow:hidden;
}
.dimensione:hover {
-ms-transform: scale(2,2);
-webkit-transform: scale(2,2);
-moz-transform: scale(2,2);
-o-transform: scale(2,2);
}
</style>
<a href="#"> <img class="dimensione" src="URL_IMMAGINE" width="200"/> </a>

si produce l'effetto di raddoppiare le dimensioni al passaggio del cursore




Per conoscere più particolari su questo effetto si può consultare il post relativo

IMMAGINI RUOTANTI

Incollando questo codice in Modalità HTML

<style>
.rotazione {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotazione:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
<a href="#"> <img class="rotazione" src="URL_IMMAGINE" width="200"/> </a>

si fa compiere alla foto una rotazione di 360 gradi in un secondo



Si possono far ruotare le immagini dopo averle rese circolari con questo codice

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

che produce questo risultato




Concludo ricordando anche il tutorial su come creare una immagine ruotante in 3D con sfondo personalizzabile e quello per mostrare testo e sfondi diversi a seconda della direzione dell'hover




5 commenti :

  1. Articolo davvero interessante :)

    RispondiElimina
  2. Bellissimi effetti, specie quello che ingrandisce le foto al passaggio del mouse.
    Ti faccio i complimenti anche per la nuova grafica del blog, davvero bella. Logo compreso. Anche il verde e rosso più tenui stanno benissimo, bel lavoro! :)
    Giuliana

    RispondiElimina
  3. Grande come al solito.
    L'effetto trasparenza e opacità al contrario con firefox 23 non funziona correttamente: si vede normale al caricamento della pagina, normale col onmouseover, solo col onmouseout diventa opaco.
    L'effetto immagini grigie che so colorano invece non funziona (attento al refuso)

    RispondiElimina

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.