Immagini CSS3, animazioni sull'evento hover

In un precedente articolo abbiamo visto come aggiungere interessanti effetti alle immagini con il CSS3 personalizzandone le forme; in questo articolo riprenderemo la serie di esempi per vedere come aggiungere nuovi effetti e animazioni sfruttando l'effetto hover su di esse.

Immagini cross-browser con jQuery

Prima di procedere rivediamo brevemente il piccolo frammento di codice Javascript che utilizzeremo per risolvere i problemi di renderizzazione che la maggior parte dei browser hanno quando si usano alcune proprietà CSS3 direttamente sulle immagini:

$(document).ready(function(){
    $('img').load(function(){
        var t = $(this);
        t.wrap(function(){
            return $('', {
                'class' : t.attr('class'),
                css   : {
                    position   : 'relative',
                    display    : 'inline-block',
                    background : 'url('+ t.attr('src') +') no-repeat center center',
                    width      : t.width() + 'px',
                    height     : t.height() + 'px'
                }
            });
        }).css('opacity', 0);
    });
});

Effetto Riflesso

Applicare un effetto riflesso alle immagini è piuttosto semplice; in questo esempio applicheremo anche un piccolo effetto transizione verso l'alto al passaggio del mouse.

span {
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5),
                     inset 0 2px 0 rgba(255,255,255,.5),
                     inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5),
                        inset 0 2px 0 rgba(255,255,255,.5),
                        inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 0 1px rgba(0,0,0,.5),
                inset 0 2px 0 rgba(255,255,255,.5),
                inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
span:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
span:hover {
	position: relative;
	top: -8px;
}

Il codice iniziale è quello utilizzato per il Card Style dell'articolo precedente; è stato solo aggiunto l'effetto transizione che andremo ad applicare sulla posizione dell'immagine.

La seconda regola utilizza lo pseudo-attributo :after per inserire l'effetto riflesso. Il colore dell'effetto è stato dato attraverso la proprietà linear-gradient con gli hack per Mozilla e Safari/Chrome.

L'ultima regola è semplicissima, utilizza l'effetto hover per spostare verso l'alto l'immagine.

Il risultato è il seguente:

Esempio

Effetti Morphing e Colorazione

Con questo esempio ed il prossimo andiamo a complicare un po' quello che abbiamo fatto finora. Partendo dall'immagine semplice con i bordi arrotondati, andiamo ad applicare una transizione che rende l'immagine tonda ed un gradiente lineare scuro all'interno.

span {
	position: relative;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
span:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
	-moz-border-radius: 30em;
	-webkit-border-radius: 30em;
	border-radius: 30em;
}
span:hover {
	-moz-border-radius: 30em;
	-webkit-border-radius: 30em;
	border-radius: 30em;
}
span:hover:after  {
	background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
	background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}

Il risultato è il seguente:

Esempio

Effetti Morphing e Glowing

L'ultimo esempio è simile al precedente ma molto più semplice da realizzare. Al passaggio del mouse sull'immagine andremo a modificare la dimensione del bordo fino a renderla tonda e aggiungeremo un'ombreggiatura chiara verso l'esterno.

Questa volta abbiamo bisogno di sole due regole; con la prima diamo un bordo arrotondato di 20px ed impostiamo la transizione, con la seconda aumentiamo i bordi arrotondati ed aggiungiamo l'ombra attraverso la proprietà box-shadow.

span {
	-moz-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
span:hover {
	-moz-box-shadow: 0 0 20px rgba(255,255,255,.6),
                         inset 0 0 20px rgba(255,255,255,1);
	-webkit-box-shadow: 0 0 20px rgba(255,255,255,.6),
                            inset 0 0 20px rgba(255,255,255,1);
	box-shadow: 0 0 20px rgba(255,255,255,.6),
                    inset 0 0 20px rgba(255,255,255,1);
	-moz-border-radius: 60em;
	-webkit-border-radius: 60em;
	border-radius: 60em;
}

In Figura 3 possiamo vedere il risultato finale:

Esempio

Approfondimenti

• La proprietà transition - Guida CSS3