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>