Come realizzare effetto d'animazione al passagio del mouse

Oggi vediamo come si possa creare  effetti animati al passaggio del mouse sopra gli ogetti  (statohover) utilizzando CSS3

In questo articolo vi mostrerò cinque esempi  utilizzando varie  proprietà CSS. La proprieta principle che useremo per la creare animazioni sara border .

Markup html base per i nostri effetti animati

Markup HTML

Questo semplice markup che vedete sotto ci permetterà di creare nostri effetti. Come si può vedere dal codice vediamo di creare l'unità genitore con la classe viev, e un altra con la classe  content  al suo interno. Dopo di che vediamo di creare classe mask che utilizeremo per realizzare transizioni CSS al passagio del mouse osi detto stato hover del elemento. Nei ultimi esempi, questo markup sara leggermente modificato a seconda dell'effetto che vogliamo ottenere.

<div class="view">  
 <img src="/images/1.jpg" />  
 <div class="mask"></div>  
 <div class="content">  
 <a href="#" class="info" title="Full Image">Full Image</a>  
 </div>  
</div>

CSS

Qui sotto potrai vedere gli stili di base della nostra lezione. Per ogni effetto creeremo un file CSS separato, ma posiamo sempre  includere gli effetti differenti in un singolo file.

.view {
 width: 300px;
 height: 200px;
 margin: 10px;
 float: left;
 border: 5px solid #fff;
 overflow: hidden;
 position: relative;
 text-align: center;
 box-shadow: 0px 0px 5px #aaa;
 cursor: default;
}
.view .mask, .view .content {
 width: 300px;
 height: 200px;
 position: absolute;
 overflow: hidden;
 top: 0;
 left: 0;
}
.view img {
 display: block;
 position: relative;
}
.view a.info {
 background:url(../img/link.png) center no-repeat;
 display: inline-block;
 text-decoration: none;
 padding:0;
 text-indent:-9999px;
 width:20px;
 height:20px;
}

Primo effetto d'animazione al passagio del mouse

passa sopra con il puntatore per vedere l'effetto.

HTML

Per realizzare il  primo esempio, aggiungiamo clase effect   al elemento con la classe  viev

<div class="view effect">
         <img src="/images/1.jpg" />
         <div class="mask"></div>
         <div class="content">
             <a href="#" class="info" title="Full Image">Full Image</a>
         </div>
    </div>
 

CSS

Come possiamo vedere, creare un'animazione è molto semplice, per risparmiare lo spazio, non ho agiunto I prefissi   (-moz -, - .. webkit e così via), ma troverete tutti i prefissi nel file che potrai scaricare sotto articolo.

Ho usato la proprietà border per creare un triangolo, e un paio di passaggi, che ci permettono  di avere un maggiore controllo per ogni proprietà durante l'animazione.

.effect img {
 opacity:1;
 transform:scale(1,1);
 transition: all 0.2s ease-in;
}
.effect .mask {
 opacity:0;
 overflow:visible;
 border-color:rgba(0,0,0,0.7) transparent transparent transparent;
 border-style:solid;
 border-width:150px;
 width:0;
 height:0;
 transform:translateY(-125px);
 transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;
}
.effect a.info {
 opacity:0;
 transform:translateY(-125px);
 transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;
}
.effect:hover img {
 opacity:0.7;
 transform:scale(2,2);
}
.effect:hover .mask {
 opacity: 1;
 transform: translateY(0px);
}
.effect:hover a.info {
 opacity:1;
 transform:translateY(100px);
}

Come potrai notare abbimo usato diverse proprieta per realizzare animazione come per esempio transform e transition con diversi valori come translate e scale.

Secondo esempio

HTML

La sintassi in questo caso è un po 'diversa,  cambiando l'effetto cambiamo anche la classe useremo  second-effect  agiungendola alla classe view , e aggiungiamo anche un link  o collegamento ipertestuale all'interno del blocco  con la  classe mask .

<div class="view second-effect">  
 <img src="/images/2.jpg" />  
 <div class="mask">  
 <a href="#" class="info" title="Full Image">Full Image</a>  
 </div>  
</div>  

CSS

In questo esempio, lavoreremo con i parametri della proprietà border. Viene usato anche box-sizing . La proprieta box-sizing dei CSS  permette di modificare l'algoritmo per calcolare la larghezza e l'altezza dell'elemento.

.second-effect .mask {
 opacity: 0;
 overflow:visible;
 border:0px solid rgba(0,0,0,0.7);
 box-sizing:border-box;
 transition: all 0.4s ease-in-out;
}
.second-effect a.info {
 position:relative;
 top:-10px;
 opacity:0;
 transform:scale(0,0);
 transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;
}
.second-effect:hover .mask {
 opacity: 1;
 border:100px solid rgba(0,0,0,0.7);
}
.second-effect:hover a.info {
 opacity:1;
 transform:scale(1,1);
 transition-delay:0.3s;
}

 Sempre gli stessi proprieta di animazione ma l'effetto realizzato è completamente diverso. A questo punto potrai fare dei propri sperimeti per cambiare valori e ottenere la tua animazione personalizzata . Vediamo altri animazioni, andiamo avanti.

Terzo esempio d'animazione al passagio del mouse


Markup HTML

Qui aggiungeremo alla classe viev una classe per il terzo effetto  third-effect.

<div class="view third-effect"> 
 <img src="/images/3.jpg" /> 
 <div class="mask"> 
 <a href="#" class="info" title="Full Image">Full Image</a> 
 </div> 
</div>  
.

CSS

Come possiamo vedere, c'è ben poco di codice, e come risultato  possiamo ottenere un buon effetto dovuto alla proprieta border  

.third-effect .mask {
 opacity: 0;
 overflow:visible;
 border:100px solid rgba(0,0,0,0.7);
 box-sizing:border-box;
 transition: all 0.4s ease-in-out;
}
.third-effect a.info {
 position:relative;
 top:-10px; /* Center the link */
 opacity: 0;
 transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
 opacity: 1;
 border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
 opacity:1;
 transition-delay: 0.3s;
}

Quarto esempio dello stato hover

Markup HTML

Markup in questo esempio sara molto breve rispetto esempi precedenti, ma l'effetto hover sarà molto impressionante.

<div class="view fourth-effect"> 
 <a href="#" title="Full Image"><img src="/images/1.jpg" /></a> 
 <div class="mask"></div> 
</div>  

CSS

Utilizzando solo la classe  mask, in combinazione con la proprietà border-radius ci permettera di creare un  bellissimo effetto hover.

.fourth-effect .mask {
 position:absolute; /* Center the mask */
 top:50px;
 left:100px;
 cursor:pointer;
 border-radius: 50px;
 border-width: 50px;
 display: inline-block;
 height: 100px;
 width: 100px;
 border: 50px solid rgba(0, 0, 0, 0.7);
 box-sizing:border-box;
 opacity:1;
 visibility:visible;
 transform:scale(4);
 transition:all 0.3s ease-in-out;
}
.fourth-effect:hover .mask {
 opacity: 0;
 border:0px solid rgba(0,0,0,0.7);
 visibility:hidden;
}

Quinto esempio d'animazione al hover

Markup HTML

L'ultimo esempio ha lo stesso markup come il  quarto, con la sola differenza che si aggiunge una classe fifth-effect , e non la fourth-effect .

<div class="view fifth-effect"> 
 <a href="#" title="Full Image"><img src="/images/1.jpg" /></a> 
 <div class="mask"></div> 
</div> 

CSS

Anche qui useremo la proprietà border con valore visibility . Come si può vedere, il trucco è che si cambia la proprietà border da solid al double.

.fifth-effect img {
 opacity:0.2;
 transition: all 0.3s ease-in;
}
.fifth-effect .mask {
 cursor:pointer;
 opacity:1;
 visibility:visible;
 border:100px solid rgba(0,0,0,0.7);
 box-sizing:border-box;
 transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);
}
.fifth-effect:hover .mask {
 border:0px double rgba(0,0,0,0.7);
 opacity:0;
 visibility:hidden;
}
.fifth-effect:hover img {
 opacity:1;
}

Se gli effetti vi sono piaciuti usateli.

Letto 853 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso