Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120721 Images en accordéon | | Coucou Comment réaliser un accordéon pour vos images? Remplacer dans le code HTML: TITRE IMAGE <== Par votre titre URL IMAGE<== Par le lien de votre image HTML - Code:
-
<div class="accordian"> <ul> <li> <div class="image_title"><a href="#">TITRE IMAGE</a></div> <a href="#"> <img src="URL IMAGE" alt=""/> </a></li> <li> <div class="image_title"><a href="#">TITRE IMAGE</a></div> <a href="#"> <img src="URL IMAGE" alt=""/> </a></li> <li> <div class="image_title"><a href="#">TITRE IMAGE</a></div> <a href="#"> <img src="URL IMAGE" alt=""/> </a></li> <li> <div class="image_title"><a href="#">TITRE IMAGE</a></div> <a href="#"> <img src="URL IMAGE" alt=""/> </a></li> <li> <div class="image_title"><a href="#">TITRE IMAGE</a></div> <a href="#"> <img src="URL IMAGE" alt=""/> </a></li>
</ul> </div> CSS - Code:
-
/*Now the styles*/ * { margin: 0; padding: 0; } body { background: transparent; 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: ; 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.9s; -webkit-transition: all 0.9s; -moz-transition: all 0.9s; /*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; } |
| |