La potenza di CSS3 è enorme e in questo tutorial verrà mostrato come sfruttarla in modo davvero molto creativo. Vedremo alcuni bellissimi effetti hover applicati a delle miniature e creati con transizioni CSS3.
Il risultato sarà che al passaggio del mouse sopra l’immagine apparirà una descrizione relativa, in ogni esempio differente per animazione e stile.
Effetti hover sulle immagini – Codice base
La struttura del codice è molto semplice ed intuitiva. Servirà creare un contenitore che conterrà la nostra immagine, la descrizione ed il link. All’interno di esso verrà inserito un elemento con classe mask che sarà responsabile della riproduzione dei vari effetti CSS3.
|
1 2 3 4 5 6 7 8 |
<div class="view"> <img src="image.gif" /> <div class="mask"> <h2>Title</h2> <p>Your Text</p> <a href="#" class="info">Read More</a> </div> </div> |
Fatto ciò andremo a specificare un codice CSS di base valito e necessario indifferentemente dall’effetto utilizzato.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.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 } |
Infine, scaricando il file Zip che trovate sotto, avrete solo da scegliere l’effetto che desidererete utilizzare ed implementare così di conseguenza il codice CSS3 relativo ad esso e che troverete come detto nel pacchetto da scaricare.
Potete guardare la demo per vedere tutti i 10 effetti hover disponibili. Buon lavoro!
Demo Download Info | Sito Web | Autore
| Articolo pubblicato 5 anni fa nella categoria 
