Galerie de photo en Css

Clic pour une galerie en vertical - pop-up            Clic pour une galerie en horizontal - pop-up

Ces galeries seront utilisées pour les Pages ou même pour des documents externes en pop-up car elles ne supportent pas d'être incluses dans un flux d'article. Il est préférable d'avoir à la base les images au moins à la (grande) taille prévue dans la galerie et de proportions identiques.

Il s'agit d'un simple tableau inclus dans un div, ici nommé galerie.

Dans chaque cellule, on a un lien sur une image (vignette) et une image (grande) cachée, suivie d'un titre..

<a>
   <img class="vignette" href="url de l'image A"/>
      <span>
         <img class="grande" href="url de l'image A"/>
      </span>
   <br/> Titre de l'image<br/>
</a>

Les deux classes .vignette et .grande permettent de définir via le Css une hauteur et une largeur d'image.

Au repos, le span avec la grande image est caché.
Au survol de la vignette, le span avec la grande image apparaît.

Tout est ensuite dans la distance entre le haut et la gauche de l'écran avec le haut et la gauche de l'image en grand, valeur qui reste à ajuster dans l'environnement final.

La galerie part du même principe, sauf que j'ai inclus dans le tableau une ligne vide avec une hauteur imposée pour l'apparition de la grande image.

On pourrait aussi imaginer un tableau avec un pourtour de vignettes et la grande image à l'intérieur, ce qui n'est qu'une question de fusion de cellules, bref, laissez votre imagination vous mener...

Ecrire un commentaire      Lire les Coms