Light Box Example com barra rolante

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

COLOQUE AQUI O TEXTO

Pure CSS Light Box Example - Devin Olsen<br /> <br /> <style type="text/css"> html,body{height:100%;} #box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:20px; 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: 230px; display:none; padding:20px;} h2 {margin:0px;} </style><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 /> <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 /> <div class="onLight"><br /> <div class="offLight">Off</div><div class="lightBox"></div><div class="content"><div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: url( COLOQUE AQUI O ENDEREÇO DA IMAGEM ) repeat scroll center bottom; : orangered; height: 380px; overflow: auto; padding: 3px; position: relative;"><marquee direction="up"> </marquee><a href="COLOQUE O LINK DA PÁGINA AQUI"> <br /> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"width="550" height="500"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br /> <br /> <a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br /> <br /> COLOQUE AQUI O TEXTO<br /> <br /> </div><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br /> <br /> <br /> </div></div></div>