28172 sujets

CSS et mise en forme, CSS3

Amis codeur, bonjour Smiley smile


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)