Lightbox con CSS3

1
82

Codrops realiza un experimento con CSS3 haciendo un lightbox con tres tipos de animaciones, tan solo

necesitamos incluir una hoja de estilos que realizara la funcionalidad de lightbox y una estructura HTML donde tendremos el thumbnail y la foto expandida.

Mediante la pseudo clase :target podemos abrir lightbox e incluso navegar entre ellos sin una sola línea de JavaScript.
Primero debemos descargar el código desde el siguiente link.
Descargar Lightbox CSS3
Ahora buscamos la carpeta /css donde están las tres hojas de estilo, solo debemos incluir una, cada CSS tiene diferente animación y todas sirven para abrir un lightbox.
[html]
<link rel="stylesheet" type="text/css" href="css/style.css" />
[/html]
Lo siguiente será escribir nuestro HTML con la siguiente

estructura.
[html]
<ul class="lb-album">
<!– start –>
<li>
<!– thumbnail –>
<a href="#image2">
<img src="images/thumbs/2.jpg" alt="image02"/>
<span>Pointe</span>
</a>
<!– end thumbnail –>
<!– lightbox –>
<div class="lb-overlay" id="image2">
<img src="images/full/2.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</span></h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image1" class="lb-prev">Prev</a>
<a href="#image3" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
<!– end lightbox –>
</li>
<!– end –>
<li>
<!– more –>
</li>
</ul>
[/html]

Demo 1

Demo 2

Demo 3

Descargar Lightbox CSS3
Vía: Codrops

zp8497586rq

1 COMMENT

Comments are closed.