Cinque fantastici esempi di effetti hover (al passaggio del mouse) su immagini che sono possibili grazie alle proprietà di CSS3. Si prega di notare che questo codice funzionerà correttamente solo con i browser moderni che supportano le proprietà CSS3 attuali.
Codice HTML
1 2 3 4 |
<div class="view"><img src="images/1.jpg" alt="" /> <div class="mask"></div> <div class="content"><a class="info" title="Full Image" href="#">Full Image</a></div> </div> |
Questa semplice struttura ci permette di ottenere questi effetti. Negli esempi successivi, visibili sul sito dell’autore del codice, questa sintassi potrebbe cambiare leggermente a seconda dell’effetto che si desidera applicare.
Codice CSS
Per ogni effetto è presente un altro codice CSS.
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 |
.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; } |
Demo Download Info | Sito Web | Autore