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 lo stesso sito web.
Si tratta di effetti interattivi, nella maggior parte dei casi "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.
Effetto slide bottom-top-right
Il primo effetto che andremo a vedere consiste nello spostamento dell'immagine, dall'angolo basso sinistro verso l'angolo superiore destro, in diagonale.
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.
Nella prima pagina di esempio che ho creato, si può vedere all'opera l'effetto slide bottom-top-right sulle immagini 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;
}
}
L'effetto slide top-bottom sulle imagini in azione.
Effetto Flip sulle immagini
Il terzo ed ultimo effetto, viene definito "Effetto Flip". Vale a dire che l'immagine ruota sull'asse verticale, mostrando il testo dietro di essa.
Tempo fa ho scritto un articolo nel quale veniva mostrato un effetto flip sulle voci di menu con i CSS3. Il principio è identico.
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 ho preparato un esempio dimostrativo con l'effetto flip sulle immagini al passaggio del mouse.