/* BOITE A IMAGES */

.window_overlay{display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}

.window_content {position: absolute;display: none;border: 16px solid #FFCC00;background-color:#000;z-index:1002;height: auto;width: auto;overflow:auto}

.window_content a{display: block;font-size:1.6em;font-weight: bold;color:#000;background: #FFCC00 url(button-close.png) no-repeat left 84%;padding-left: 30px;padding-top:10px;text-decoration: none}

.window_content a:hover{background: #FFCC00 url(button-close-hover.png) no-repeat left 84%;color:#999}

img.polaroid {padding: 1% 1% 8%;background: #fff;border: 1px solid #ccc;border-width: 1px 2px 2px 1px}

#vign {float: left;}

#vign p {text-align: center;color: #333;display: block;position: relative;top: -30px;font-size: .8em;}

<div id="vign">

<a href = "javascript:void(0)" onclick = "document.getElementById('large').style.display='block';document.getElementById('small').style.display='block'"><img src="vign.jpg" alt="blabla" width="160" height="120" class="img_left polaroid" /></a>

<p>Bla bla bla...</p></div>

<div id="large" class="window_content"><img src="large.jpg" width="800" height="600" alt="bla" /><a href = "javascript:void(0)" onclick = "document.getElementById('large').style.display='none';document.getElementById('small').style.display='none'">Fermer la fenêtre</a></div>

<div id="small" class="window_overlay"></div>