Réaliser un slideshow en CSS - HoverBox

Introduction



Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.


Hoverbox: Voir l'exemple | Télécharger ici ... (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 votre 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 les couleurs :



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 TPL :
<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 :






A vous de jouer !


Maj le 14/08/2012 par Swan.