Amis codeur, bonjour
J'ai une gallerie CSS qui est sur le fonctionnement suivant :
Des vignettes à gauche qui ouvre en effet de transition (css3) l'image sur la droite du div. Donc à chaque clic sur une vignette, déclenchement de la transition et changement d'image grace à un target.
Le soucis que j'ai, c'est comment faire pour mettre une légende sous ces photos (version grande à droite ?)
J'ai voulu le faire avec un span, relié à une classe CSS, mais je ne trouve pas comment faire pour que le texte s'adapte à la photo sans utiliser de javascript (que je ne veux pas!).
Voici mon code html :
et mon CSS (en partie)
J'ai une gallerie CSS qui est sur le fonctionnement suivant :
Des vignettes à gauche qui ouvre en effet de transition (css3) l'image sur la droite du div. Donc à chaque clic sur une vignette, déclenchement de la transition et changement d'image grace à un target.
Le soucis que j'ai, c'est comment faire pour mettre une légende sous ces photos (version grande à droite ?)
J'ai voulu le faire avec un span, relié à une classe CSS, mais je ne trouve pas comment faire pour que le texte s'adapte à la photo sans utiliser de javascript (que je ne veux pas!).
Voici mon code html :
<section id="content">
<div>
<ul id="zoom">
li><img id="art2" src="galerie/img/art2.jpg" width="452" height="452" alt="Art2"></li>
<li><img id="art2" src="galerie/img/art2.jpg" width="452" height="452" alt="Art2"></li>
<li><img id="art3" src="galerie/img/art3.jpg" width="452" height="452" alt="Art3"></li>
<li><img id="art4" src="galerie/img/art4.jpg" width="452" height="452" alt="Art4"></li>[...]
</ul>
<ul id="thumbs">
<li><a href="#art1"><img src="galerie/img/art1_thumb.jpg" width="180" height="180" alt="Art1"></a></li>
<li><a href="#art2"><img src="galerie/img/art2_thumb.jpg" width="180" height="180" alt="Art2"></a></li>
<li><a href="#art3"><img src="galerie/img/art3_thumb.jpg" width="180" height="180" alt="Art3"></a></li>
<li><a href="#art4"><img src="galerie/img/art4_thumb.jpg" width="180" height="180" alt="Art4"></a></li>
[...]
</ul>
</div>
</section>
et mon CSS (en partie)