Lightbox con CSS3

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

zp8497586rq

También te puede interesar

One Comment

  1. raul
    dic 29, 2011 @ 04:25:35

    Muy bueno, pero como casi siempre Explorer da problemas…