Oggi vi segnalo con interesse questo slider di scorrimento di immagini a fisarmonica (accordian style), scorrimento che avviene al semplice passaggio del mouse, realizzato esclusivamente in CSS3 e senza alcun impiego di codice Javascript.
Questo slider pu?? includere qualsiasi numero di immagini e pu?? essere facilmente utilizzato nei vostri siti web. Guardate la demo e vedrete che oltre ad essere davvero bello risulta essere anche molto funzionale. Buon lavoro!
Codice HTML
|
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 |
<!-- We will make a simple accordian with hover effects The markup will have a list with images and the titles--> <div class="accordian"> <ul> <li> <div class="image_title"> <a href="#">KungFu Panda</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Toy Story 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Wall-E</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Up</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/> </a> </li> <li> <div class="image_title"> <a href="#">Cars 2</a> </div> <a href="#"> <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/> </a> </li> </ul> </div> |
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
/*Now the styles*/ * { margin: 0; padding: 0; } body { background: #ccc; font-family: arial, verdana, tahoma; } /*Time to apply widths for accordian to work Width of image = 640px total images = 5 so width of hovered image = 640px width of un-hovered image = 40px - you can set this to anything so total container width = 640 + 40*4 = 800px; default width = 800/5 = 160px; */ .accordian { width: 805px; height: 320px; overflow: hidden; /*Time for some styling*/ margin: 100px auto; box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35); } /*A small hack to prevent flickering on some browsers*/ .accordian ul { width: 2000px; /*This will give ample space to the last item to move instead of falling down/flickering during hovers.*/ } .accordian li { position: relative; display: block; width: 160px; float: left; border-left: 1px solid #888; box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5); /*Transitions to give animation effect*/ transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /*If you hover on the images now you should be able to see the basic accordian*/ } /*Reduce with of un-hovered elements*/ .accordian ul:hover li {width: 40px;} /*Lets apply hover effects now*/ /*The LI hover style should override the UL hover style*/ .accordian ul li:hover {width: 640px;} .accordian li img { display: block; } /*Image title styles*/ .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 20px; font-size: 16px; } |
pixolo ads
| Articolo pubblicato 5 anni fa nella categoria 
