Réaliser un slideshow en CSS - HoverBox
Hoverbox: Voir l'exemple | Download Here (280 KB)
Vous venez de télécharger l'archive, vous la décompressez et ensuite il ne vous reste plus qu'à faire quelques modifications pour personnaliser le css
Ouvrez le fichier hoverbox.css dans mon bloc-note.
Pour changer le background :
Code CSS :
body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 620px; }
Pour mettre une image dans le background :
Vous pouvez soit mettre transparent, ou une couleurs hexadécimal (#FFFFFF) ou encore le nom d'une couleur(sécurisé pour le web).
Code CSS :
body {background:transparent url(images/global.png) no-repeat; }
Pour le padding c'est à vous de voir le réglage que vous souhaitez.
*le "Padding", c'est la distance entre le bord d'un élément HTML et son contenu
Et pour le width c'est pareil.
*Le width permet de spécifier la largeur d'un élément.
Placer ses images dans le code html
Je procède de cette manière:
Code HTML :
<div class="hoverbox" style="margin-left: 2em;"> <ul class="hoverbox"> <li> <a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview" ></a> </li> <li> <a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview"></a> </li> <li> <a href="/wiki/#"><img src="http://url de votre image.jpg" alt="description" title="Mon titre"> <img src="http://url de votre image.jpg" alt="description" title="Mon titre" class="preview"></a> </li> </ul>
Je remplace :
- http://url de votre image.jpg: Par l'url ou le dossier ou sont les images.
- description: Par la description de l'image.
- Mon
titre: le titre de l'image.
A vous de jouer !