Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Immagini CSS3, animazioni sull'evento hover

Gestire effetti d'impatto al passaggio del mouse
Gestire effetti d'impatto al passaggio del mouse
Link copiato negli appunti

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',
                    ',
                    '
                }
            });
        }).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%;
	;
	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:

Figura 1 - Effetto Riflesso
Effetto Riflesso

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:

Figura 2 - Effetti Morphing e Colorazione
Effetti Morphing e Colorazione

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:

Figura 3 - Effetti Morphing e Glowing
Effetti Morphing e Glowing

Esempio

Approfondimenti

Ti consigliamo anche