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 primo esempio 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 secondo esempio 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 esempio dimostrativo con l'effetto flip.