Galeries, Diaporamas & SlideShows

Réaliser un slideshow en CSS - HoverBox

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris.


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 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.

A vous de jouer !