Frontend

Lightbox con CSS3

27 Diciembre, 2011

142

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]