Lightbox, Mover o mouse sobre a imgem off para ligar o lightbox

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.

Off

Pure CSS Light Box Example - Devin Olsen<br /> <style type="text/css"> html,body{height:100%;} #box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:30px; border:#333333 dashed; border-width:1px; padding:10px;} .onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;} .onLight:hover div, .offLight {display:block;} .offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none; cursor:pointer;} .offLight:hover + .lightBox {display:none;} .lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000; top:0px; left:0px; right:0px; display:none; cursor:default; opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/ filter: alpha(opacity=80); /*FOR IE7*/ } .content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 30px; display:none; padding:20px;} h2 {margin:0px;} </style><br /> <br /> <br /> <br /> <br /> <div id="box">Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.<br /> Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br /><br /> <br /> <div class="onLight"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="60" height="50"/> <div class="offLight">Off</div> <div class="lightBox"></div> <div class="content"> <br /> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /><br /> <br /> </div> </div></div>

Lightbox, Mover o mouse sobre o botão off para ligar o lightbox

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.
OBS:ELE TEM 2 AJUSTE PRA O TOPO

On

Off

Pure CSS Light Box Example - Devin Olsen<br /> <style type="text/css"> html,body{height:100%;} #box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:30px; border:#333333 dashed; border-width:1px; padding:10px;} .onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;} .onLight:hover div, .offLight {display:block;} .offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none; cursor:pointer;} .offLight:hover + .lightBox {display:none;} .lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000; top:550px; left:0px; right:0px; display:none; cursor:default; opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/ filter: alpha(opacity=80); /*FOR IE7*/ } .content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 550px; display:none; padding:20px;} h2 {margin:0px;} </style><br /> <br /> <br /> <br /> <br /> <div id="box">Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.<br /> Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br /> OBS:ELE TEM 2 AJUSTE PRA O TOPO<br /> <br /> <div class="onLight"><br /> On<br /> <div class="offLight">Off</div> <div class="lightBox"></div> <div class="content"><br /> <img src="http://images.orkut.com/orkut/photos/PQAAAG_mB2yEmdtaQ59pqcjkJSZkDEp_5IhvGeQkkEKhKzBkMIaA2RxodUtJg-2ObGc21LDP9HmO44oc_aJX49Zm4-cAm1T1UOGP4k1fa94KoMbNyIxg90rZ6EpP.jpg"width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /> <br /> <br /> </div></div></div>

LIGHTBOX EXAMPLE COM CONTEÚDO

LIGHTBOX EXAMPLE

This is the main content. To display a lightbox click ABRI

COLOQUE AQUI O CONTEÚDO FECHAR

LIGHTBOX EXAMPLE<br /> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } </style><br /> <br /> <br /> <p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"> ABRI</a></p><br /> <div id="light" class="white_content">COLOQUE AQUI O CONTEÚDO <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">FECHAR</a></div><div id="fade" class="black_overlay"></div>