Il codice HTML da implementare
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ZoomIt"> <ul> <li><img class="zit" src="http://www.pixolo.it/wp-content/uploads/2012/12/3943866621_748dd99da5_o.jpg" /></li> <li><img class="zit" src="http://www.pixolo.it/wp-content/uploads/2012/12/3889530692_c6b1b129ea_o.jpg" /></li> <li><img class="zit" src="http://www.pixolo.it/wp-content/uploads/2012/12/3171068730_db6591d1b1_o.jpg" /></li> <li><img class="zit" src="http://www.pixolo.it/wp-content/uploads/2012/12/3100722009_a8b018cc32_o.jpg" /></li> <li><img class="zit" src="http://www.pixolo.it/wp-content/uploads/2012/12/470085075_7efaf1f404_o.jpg" /></li> </ul> </div> <div style="clear:both"></div> |
Codice CSS3 da associare
|
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 |
.zit { position:relative; width:100px; height:80px; left:0px; top:0px; border:1px solid black; /* Apply a CSS3 Transition to width, height, top and left properties */ transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease; -webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease; -o-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease; -moz-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease; } .zit:hover { width:150px; height:120px; left:-25px; top:-25px; z-index:9999; } .ZoomIt ul { clear:left; } .ZoomIt li { width:102px; height:82px; margin:4px; float: left; overflow:visible; display: block; } |
Questo è tutto. Tale codice è naturalmente compatibile con tutti gli ultimi browser che supportano le transizioni CSS. Buon lavoro!
pixolo ads
| Articolo pubblicato 6 anni fa nella categoria 
