Creare effetti interattivi sulle immagini con CSS3
Creare effetti interattivi sulle immagini con CSS3
Extrowebsite

L'articolo odierno prende spunto dalle cosiddette "card" presenti in molti siti. Possono essere assimilate a delle mini descrizioni in base a quello che offre il sito.

Si tratta di effetti "slide" che mostrano un piccolo contenuto testuale, spostando una immagine verso l'alto, verso il basso, a destra oppure a sinistra.

Un elemento da non sottovalutare è che gli effetti che andremo a vedere vengono attivati solo con codice CSS3, senza alcun bisogno di codice Javascript.

Il comune denominatore di questi effetti è quello di mostrare una breve descrizione "nascosta" dietro l'immagine. Sono diversi gli effetti che si possono applicare. Cominciamo a vedere il primo.

Slide bottom-top

Il primo effetto che andremo a vedere consiste nello spostamento dell'immagine, dall'angolo basso sinistro verso l'angolo superiore destro, diagonalmente. Quando l'immagine non sarà più visibile, essa lascerà posto a qualche rigo di testo. Cominciamo con il codice HTML.

<div class="demo effetto">
<h1>Titolo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<img src="/images/image1.jpg" alt=""/>
</div>

Trattasi di un elemento div al cui interno troviamo un titolo H1, un paragrafo ed una immagine.

Come anticipato, l'immagine farà posto al testo.
Passiamo al codice CSS.

.demo {
position:relative;
width:340px;
height:230px;
overflow:hidden;
margin:20px auto;
background:#9cf;
}

.effetto img {
position:absolute;
top:0;
right:0;
cursor:pointer;
-webkit-transition:top .8s ease-in-out, right .8s ease-in-out;
-moz-transition:top .8s ease-in-out, right .8s ease-in-out;
-o-transition:top .8s ease-in-out, right .8s ease-in-out;
transition:top .8s ease-in-out, right .8s ease-in-out
}

.effetto img:hover {
top:-350px;
right:-350px;
padding-bottom:200px;
padding-left:300px
}

Il codice che riguarda l'effetto possiamo vederlo nella seconda dichiarazione, .effetto img, applicato all'immagine. La transizione transition:top .8s ease-in-out, right .8s ease-in-out stabilisce il tempo durante il quale deve avvenire lo spostamento dell'immagine.
Ovviamente, anche in questo caso, è possibile modificare la durata.

Il mostra la transizione.

Slide top-bottom

La seconda transizione, come si evince dal titolo, è molto simile alla prima. La differenza è che questa volta lo spostamento avverrà in verticale. Dall'alto verso il basso.
Vediamo il codice HTML.

<div class="demo effetto">
<h1>Titolo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<img src="/images/image1.jpg" alt=""/>
</div>

Sostanzialmente il codice HTML è identico al primo. Quello che cambia è il codice CSS.

.demo {
position:relative;
width:340px;
height:230px;
overflow:hidden;
margin:20px auto 40px;
background:#9cf;
}

.effetto img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin: 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}

.effetto img:hover {
bottom:-100px;
padding-top:100px;
}

Come si può notare, la transizione transition:bottom .3s ease-in-out "spinge" verso il basso l'immagine. In questo caso, non possiamo inserire un testo molto lungo in quanto l'immagine non lascia spazio a tutto il riquadro. E' possibile modificare il padding, verso l'alto e verso il basso, sullo stato :hover.

Per non avere problemi nella versione mobile, è stata inserita una Mediaqueri che riduce la dimensione dell'immagine per schermi fino ad una dimensione di 340px.

@media screen and (max-width:340px){
.demo {
max-width:300px;
height:190px;
}
}

Il in azione.

Effetto Flip sulle immagini

Il terzo ed ultimo caso, viene definito "Effetto Flip". Vale a dire che l'immagine ruota sull'asse verticale, mostrando il testo dietro di essa.

Il codice HTML:

<div class="demo">
<figure>
<img src="/images/image1.jpg" alt=""/>
<figcaption>
<h1>Titolo 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</figcaption>
</figure>
</div>

Come si può notare, in questo caso ci si avvale degli elementi HTML5 figure e figcaption.

L'elemento figure contiene l'immagine e la sua descrizione: figcaption.

Quando si passa con il mouse sull'immagine, essa subirà la rotazione e mostrerà il testo descrittivo.

Il codice CSS:

.demo {
position:relative;
width:340px;
height:230px;
overflow:hidden;
margin:30px auto 50px;
}

.demo figure {
margin:0;
padding:0;
cursor:pointer;
}

.demo figure img {
display:block;
z-index:10;
margin:0;
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}

.demo figure figcaption {
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20px 35px;
background:#9cf;
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
}

.demo figure:hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg);
}

.demo figure:hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}

Questo esempio necessita di qualche rigo di codice CSS in più rispetto ai primi due. Notare, per l'elemento img la dichiarazione backface-visibility:hidden.

Il codice fa in modo che la parte retrostante non mostri il contenuto. Stesso principio per l'elemento figcaption.

Anche in questo caso è stato preparato un .