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.