Galerie HTML et CSS3

Dans ce tutoriel, nous allons mettre en place une galerie d'image en HTML et CSS.

 

LE CODE HTML

Nous allons commencer pour créer une page HTML simple qui contiendra les balises :
-<html></html>
-<head></head>
-<body></body>
Bien sûr les balises <head> et <body> sont à mettre à l'intérieur de la balise <html></html>

Dans la balise <head></head>, nous mettrons la balise <title></title> qui contiendra le titre de notre page et un lien pour le fichier CSS qui nous verrons après.
Vous devriez avoir donc ceci pour le moment.
<doctype Html>
<html>
<head>
<title>Galerie d'image</title>
<link href="style.css" type="text/css" />
</head>
<body>

</body>
</html>

Dans le corps de la page, c'est-à-dire, entre les balises <body></body>, nous allons créer une div qui contiendra les vignettes de vos images et dont son id se nommera "thumb".
A l'interieur de cette div, nous allons mettre les liens de nos images, qui seront également dans une div. Vos images seront entourées d'une balise lien avec l'attribut href qui contiendra l'id de votre image.
<div id="thumb">
<div><a href="#0"> <img src="img_0.jpg"></a></div>
<div><a href="#1"> <img src="img_1.jpg"></a></div>
<div><a href="#2"> <img src="img_2.jpg"></a></div>
<div><a href="#3"> <img src="img_3.jpg"></a></div>
<div><a href="#4"> <img src="img_4.jpg"></a></div>
<div><a href="#5"> <img src="img_5.jpg"></a></div>
</div>
Toujours dans le corps de la page, nous allons à prèsent afficher l'image principale. L'image qui s'affichera lorsque le visiteur cliquera sur l'une des vignettes.
Pour cela nous allons utiliser la balises <ul></ul> et <li></li>. Dans la balises <li></li>, nous mettrons donc le lien de vos images et ainsi que l'id de celle-ci qui
sera le même id que sur la vignette.
<ul id="main_photo">
<li><img src="img_0.jpg" alt="0" id="0"></li>
<li><img src="img_1.jpg" alt="1" id="1"></li>
<li><img src="img_2.jpg" alt="2" id="2"></li>
<li><img src="img_3.jpg" alt="3" id="3"></li>
<li><img src="img_4.jpg" alt="4" id="4"></li>
<li><img src="img_5.jpg" alt="5" id="5"></li>
</ul>

LE CODE CSS

Le code CSS permet de mettre en forme notre galerie d'image qui sans le style CSS, elle ne serait qu'une suite
de vos photos.

1/ L'image principale
Commençons par enlever le style liste avec "liste-style:none;" ainsi que les marges et mettons
une position absolue.
ul, li {
list-style=none;
margin: 0;
position: absolute;
}
Occupons-nous ensuite de la balise <ul id="main_photo">. Nous allons lui indiquer une largeur, une hauteur,
les marges (top et left) et lui mettre une position relative
ul#main_photo {
width:600px;
height:450px;
margin-top:180px;
margin-left:400;
position:relative;
}
Pour les images qui se trouvent dans <ul id="main_photo">, on va leur apppliquer une opacité de 0, une largeur
de 600pixels ainsi qu'une transition. Les marges seront en auto.
ul#main_photo img {
opacity:0;
width:600px;
margin:auto;
-moz-transition:opacity 1s ease-in-out;
-webkit-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
Il faut également appliquer un style à l'image ciblée.
ul#main_photo img:target {
opacity:1;

}

2/ Les vignettes
Ici nous allons mettre en forme les vignettes, <div id="thumb">. Cette <div> auront une hauteur de 20% et une largeur de 100%
Sa position sera fixe et sera suivi de top 0 et left 0 afin que vos vignettes soient sur le haut de votre page. J'ai également ajouté
une ligne en bas pour séparer les vignettes de la photo principale.
div#thumb{
height:20%;
width:100%;
position:fixed;
top:0;
left:0;
border-bottom:1px solid #ccc;
}
Pour ce qui concerne la <div id="thumb_center"> c'est ce qui va centrer les vignettes dans votre page.
Cette <div> aura une largeur de 70%, le texte sera au centre et les marges en auto.
div#thumb_center{
width:70%;
margin:auto;
text-align:center;
}
Nous allons mis les vignettes dans un cadre <div id="cadre"> que nous allons aussi mettre en forme.
Le padding et la marge sera de 5px, la largeur de 14%, le texte aligné au centre.
div#cadre {
padding:5px;
width: 14%;
text-align:center;
margin:5px;
float:left;
}
Maintenant, nous allons mettre un effet de survol sur les vignettes. Tout d'abord il faut commencer par la position
de non survol et ensuite faire l'effet de survol.
div#cadre img {
width: 100%;
opacity:0.7;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
div#cadre img:hover {
opacity:1;
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
padding:0px;
z-index:3;
}