Lightbox con CSS3

27 diciembre, 2011 by César | 1 Comment

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.

<link rel="stylesheet" type="text/css" href="css/style.css" />

Lo siguiente será escribir nuestro HTML con la siguiente estructura.

<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>

Demo 1

Demo 2

Demo 3

Descargar Lightbox CSS3

Vía: Codrops