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

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

EFFETTO TRASPARENZA E OPACITA'

Usando questo codice

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IUfXm0nnGKsOtS70B2OvUHTf5A2N0aX_5mRzzeX8DvylVCtSB9Dr7J7P6aJYV8B9f9Pm4RykMaj42w8IzpeoNiu39ncu-TgtMr1OtD8hz8JelQEIItDu4588phM1WJBQYvF4dWZLUqg/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

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

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3IUfXm0nnGKsOtS70B2OvUHTf5A2N0aX_5mRzzeX8DvylVCtSB9Dr7J7P6aJYV8B9f9Pm4RykMaj42w8IzpeoNiu39ncu-TgtMr1OtD8hz8JelQEIItDu4588phM1WJBQYvF4dWZLUqg/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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj215bHIuakLMuXgWEIf1JLwKe0fHjvZUzuF7BCDc4FpNoO9ZWFTQcyfjSE0CqUfNQyUUFm2x_7dOP7Hg6ntaSYRtxHWxivn16X7UmKmLEQMSFmFf2vgxPX-NbYaL-GZoHbwYV5of2-S0s/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.