Effets Css sans javascript

Effet Lightbox (clic sur la vignette image)

---

Suspendisse leo nunc, vehicula ut, rutrum eu, mollis eu, nisl. Donec congue. Curabitur et libero. Curabitur sodales magna ultrices nunc. Aliquam vel augue ut massa luctus tincidunt. Quisque bibendum tristique ante. Suspendisse eu nisi vitae orci tincidunt euismod. Mauris est mi, suscipit vitae, viverra vitae, pharetra a, dolor. Aliquam massa. Fusce nec augue id tellus tincidunt tincidunt. Ut facilisis, purus ac varius fringilla, felis leo adipiscing tellus, ac aliquet nunc urna in diam. Nullam adipiscing felis. Etiam at nibh ut tellus porttitor dictum. Etiam sagittis bibendum neque. In id nisl.

---

•  Nécessite 3 images : une vignette, la même en grand et le fond "lightbox", par exemple un noir opacité 30% enregistré en png24.

• Partie Css (à mettre éventuellement en mode html, entourée des balises <style type="text/css">blabla</style>)

/* style de l'image, bordure, retrait, marges */
img {border: 1px solid #ccc; padding: 3px; margin: 0 1em 0 1em;}

/* style de l'image agrandie, retrait, fond */
div.lb img { padding: 2em; background: #fff;}

/* l'image agrandie est cachée */
div.lb { display: none;}

/* une fois le lien vignette cliqué, style et image fond du calque, retraits éventuels */
div.lb:target { display: block !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; background: url('http://idata.over-blog.com/0/13/75/16/design/blanc70.png'); position: fixed; padding: 2em;}

•  Partie Html

<a href="#lbx">  lien, identifiant #lbx (numérotation si plusieurs)
  <img src="http://idata.over-blog.com/0/13/75/16/2008/ofvign.jpg" title="Cliqu'z'y !" align="left" /> image vignette
</a>
<p>éventuellement ici un paragraphe de texte...</p>
<div id="lbx" class="lb">  définition du lien, ligne à répéter autant de fois, en changeant le numéro final
  <a href="#top"><img src="http://idata.over-blog.com/0/13/75/16/2008/O-F.jpg" title="yes" /></a> image taille 1
</div>

---

http://www.kawamag.com/effets-en-css-pur-et-conseils-sans-javascript