Come creare immagini animate coi CSS al hover.

Nuove funzionalità di CSS3 sono impressionanti. In questo tutorial, vediamo come posiamo utilizarle per creare immagini animate.  Le nostre animazioni verano attivati al passaggio del mouse sopra immagine (evento hover) ogni effetto vera accompagnato dalla descrizione e di stili utilizzati per ciascun esempio.

Markup HTML di animazione

Markup html  è molto semplice ed intuitivo. Creare un contenitore che conterrà l'immagine e tutte le altre informazioni che apparirano durante l'animazione

All'interno del elemento <div> con la classe  viev inseriremo un altro <div>  con la classe mask. E nel elemento con la classe mask inseriremo titolo, descrizione e link (in alcuni   esempi vediamo di inserire titolo al interno del elemento mask e in altri vediamo di inserire informazioni aggiuntivi nel elemento con la classe  content ).

<div class="view">
         <img src="/image.gif" />
                <div class="mask">
                         <h2>Titolo</h2>
                         <p>Testo del messagio</p>
                         <a href="#" class="info">Pulsante</a>
              </div>
</div>

Stili CSS di base

Dopo aver creato lo sceletro della nostra animazione definiamo gli stili. Nella realizzazione d'animazioni nella nostra raccolta  utilizzeremo sia stili CSS di base  sia stili individuali  a secondo del esempio.

Per vedere il codice aprire lo spoiler cliccando 

.view {
    width: 300px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 300px;
    height: 200px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}
.view a.info:hover {
    box-shadow: 0 0 5px #000
}

Ora vediamo i nostri 10 effetti di animazione coi CSS.

ESEMPIO 1

In ogni esempio useremo una classe particolare che indichera il numero del esemio come  view-first (first indica gli stili della prima animazione second  della seconda e cosi via) e agiungeremo questa classe alla classe di base view .

Stile #1

Il bello viene dopo.. Impara i SCC

 

In questo esempio, per realizzare animazione al passagio del mouse  sono stati utilizzati proprieta  transition e transform  dei CSS .

Per vedere il codice aprire lo spoiler cliccando sopra il titiolo

.view-first img {
    transition: all 0.2s linear;
}
.view-first .mask {
    opacity: 0;
    background-color: rgba(219,127,8, 0.7);
    transition: all 0.4s ease-in-out;
}
.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;/*tempo di transizione impostato su 2 millesecondi */
}

E ora vediamo di capire come funziona la nostra animazione. Usiamo due stati del nostro elemento. Quello iniziale e quello intermedio realizzato con pseudo classe hover che viene visualizzato al momento del passagio del puntatore sopra l'immagine. Nella  proprieta  transform  abbiamo indicato come dovrebbe transformarsi l'elemento, per esempio deve spostarsi a sinistra  transform:translateY(-100px); e nello stesso momento diventare invisibile opacity: 0;. E nella proprieta transition indichiamo come dovrebbe avvenire il cambiamento e in che periodo di tempo transition: all 0.2s linear;

Per scoprire di piu su transform e transition e cambiare qualche valore a tuo piacere clicca su uno di questi nomi per passare alla pagina con approfondimento. E noi invece andiamo avvanti!

Per vedere il codice aprire lo spoiler

.view-first:hover img {
    transform: scale(1.1);
}
.view-first:hover .mask {
    opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}
.view-first:hover p {
    transition-delay: 0.1s;
}
.view-first:hover a.info {
    transition-delay: 0.2s;
}

 

ESEMPIO 2

Nel secondo esempio, aggiungeremo un altra classe view-second , ma l'elemento con la classe mask sarà vuoto e il contenuto sara collocato nel elemento con la classe content.

Stile #2

Se devi cambiare qualcosa nel tuo sito web il nostro corso ti sara d'aiuto

Imparare CSS

Qui, la classe mask ha altri attributi per creare effetto. Vediamo di utilizzare altri metodi  di transform (translate e rotate ):

Cliccare per aprire lo spoiler.

.view-second img {
    transition: all 0.2s ease-in;
}
.view-second .mask {
    background-color: rgba(115,146,184, 0.7);
    width: 300px;
    padding: 60px;
    height: 300px;
    opacity: 0;
    transform: translate(265px, 145px) rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.view-second h2 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: translate(200px, -200px);
    transition: all 0.2s ease-in-out;
}
.view-second p {
    transform: translate(-200px, 200px);
    transition: all 0.2s ease-in-out;
}
.view-second a.info {
    transform: translate(0px, 100px);
    transition: all 0.2s 0.1s ease-in-out;
}

Per questo effetto utilizzeremo metodo di  trasformazione translate per spostare elementi nella nuova  posizione. E agiungeremo anche  l'effetto di rotazione. Gli elementi del contenuto  appariranno con un leggero ritardo uno dopo l'altro, indicati nella  transition-delay:.

.view-fourth:hover .mask {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view-fourth:hover img       {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

ESEMPIO 3

Nel terzo esempio useremo metodi di transformazione come  translate e rotate per visualizzare gli elementi del contenuto:

Stile #3

E sempre utile conoscere linguaggio CSS per poter cambiare il proprio sito web..


Vediamo prima gli stili iniziali della animazione.

.view-third img {
    transition: all 0.2s ease-in;
}
.view-third .mask {
    background-color: rgba(0,0,0,0.6);
    opacity: 0;
    transform: translate(460px, -100px) rotate(180deg);
    transition: all 0.2s 0.4s ease-in-out;
}
.view-third h2{
    transform: translateY(-100px);
    transition: all 0.2s ease-in-out;
}
.view-third p {
    transform: translateX(300px) rotate(90deg);
    transition: all 0.2s ease-in-out;
}
.view-third a.info {
    transform: translateY(-200px);
    transition: all 0.2s ease-in-out;
}

E qui cosa dovrebbe cambiare al passagio del mouse sopra l'immagine con aiuto di  pseudo-classe :hover.

.view-third:hover .mask {
    opacity:1;
    transition-delay: 0s;
    transform: translate(0px, 0px);
}
.view-third:hover h2 {
    transform: translateY(0px);
    transition-delay: 0.5s;
}
.view-third:hover p    {
        transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.view-third:hover a.info {
    transform: translateY(0px);
    transition-delay: 0.3s;
}

ESEMPIO 4

Nel quarto esempio utilizzeremo un semplice ridimensionamento di immagine e di contenuto, con il metodo  scale della proprieta  transform. Per l'immagine imposterò 0.2s di tempo per eseguire l'animazione, ma quando si passa sopra con il puntatore la durata sara di 0s. Pertanto, quando punteremo il mouse l'effetto si manifesterà immediatamente, ma togliendo il mouse avremo un effeto di ritardo nel ritorno allo stato iniziale .

 Gli stili CSS di base.

.view-fourth img {
    transition: all 0.4s ease-in-out 0.2s;
    opacity: 1;
}
.view-fourth .mask {
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: all 0.4s ease-in;
    border-radius: 0px;
}
.view-fourth h2{
    opacity: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transition: all 0.5s ease-in-out;
}
.view-fourth p {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

E gli stili css per lo stato hover(al passagio del mouse)

.view-fourth:hover .mask {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.2s;
}
.view-fourth:hover img       {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    opacity: 1;
    transition-delay: 0.5s;
}

Stile #4

Ma si dai impara CSS, cosa stai aspettando che scrivero una poema sul tema?!

 Ciao e alla prossima, dove vediamo altri 6 effetti e spiegero come realizzarli sul vostro sito Joomla.

 

Letto 2578 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