Cómo crear un efecto Lightbox sólo con CSS

Gracias a CSS podemos crear hermosas animaciones sin necesidad de utilizar plugins externos. Es por ello que hoy os voy a enseñar a crear vuestro propio Lightbox. ¿Te invito a que pruebes!

Lightbox y sus plugins

Generalmente para realizar este efecto se suelen utilizar librerías de JavaScript. En JQuery podemos encontrar algunos conocidos como Lightbox por Lokesh Dhakar, o FancyBox.

Si bien nos ahorra tiempo tecleando código, pueden también afectar al rendimiento de nuestra web. Por tanto mi recomendación es usarlos únicamente en casos extremadamente necesarios.

Para evitarlo vamos a crearlo nosotros mismo utilizándo únicamente Html5 y Css3, generando así un código limpio para nuestra web.

Crea una Barra de Progreso Animada en CSS3

El Html

Creamos un archivo html. En éste incluimos una imagen para aplicarle el efecto.

<div id="content">
  <h2>Efecto LightBox en CSS3</h2>
	<a href="#image1" class="wiggle"><img src="http://placehold.it/150x150"/></a>
  <div class="lightbox short-animate" id="image1">
    <img class="long-animate" src="http://placehold.it/650x650"/>
  </div>
  <div id="lightbox-controls" class="short-animate">
    <a id="close-lightbox" class="long-animate" href="#!">Close Lightbox</a>
  </div>
</div>

El CSS3

Aquí nos encargaremos de generar el efecto mediante el uso de transiciones y transformaciones en CSS3.

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body {
  height:100%;
  max-height:100%;
}

body {
  background:#476C9B;
}

h2 {
  font-weight:200;
  font-size:40px;
  padding:50px 0;
  text-align:center;
  color:#ADD9F4;
}

.wiggle {
  display:block;
  margin:0 auto;
  width:150px;
  height:150px;
  box-shadow:8px 8px 1px 0 rgba(0,0,0,.15);
}

.wiggle:hover {
  -webkit-animation:none;
}

.short-animate {
  -webkit-transition:.5s ease-in-out;
  -moz-transition:.5s ease-in-out;
  -ms-transition:.5s ease-in-out;
  -o-transition:.5s ease-in-out;
  transition:.5s ease-in-out;
}

.long-animate {
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}

html,body {
  height:100%;
  min-height:100%;
}

.lightbox {
  position:fixed;
  top:-100%;
  bottom:100%;
  left:0;
  right:0;
  background:#984447;
  z-index:501;
  opacity:0;
}

.lightbox img {
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  bottom:0;
  max-width:0%;
  max-height:0%;
}

#lightbox-controls {
  position:fixed;
  height:70px;
  width:70px;
  top:-70px;
  right:0;
  z-index:502;
  background:rgba(0,0,0,.1);
}

#close-lightbox {
  display:block;
  position:absolute;
  overflow:hidden;
  height:50px;
  width:50px;
  text-indent:-5000px;
  right:10px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -ms-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

#close-lightbox:before {
  content:'';
  display:block;
  position:absolute;
  height:0px;
  width:3px;
  left:24px;
  top:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s .5s ease-in-out;
  -moz-transition: .5s .5s ease-in-out;
  -ms-transition: .5s .5s ease-in-out;
  -o-transition:.5s .5s ease-in-out;
  transition:.5s .5s ease-in-out;
}

#close-lightbox:after {
  content:'';
  display:block;
  position:absolute;
  width:0px;
  height:3px;
  top:24px;
  left:0;
  background:white;
  border-radius:2px;
  -webkit-transition: .5s 1s ease-in-out;
  -moz-transition: .5s 1s ease-in-out;
  -ms-transition: .5s 1s ease-in-out;
  -o-transition:.5s 1s ease-in-out;
  transition:.5s 1s ease-in-out;
}

.lightbox:target {
  top:0%;
  bottom:0%;
  opacity:1;
}

.lightbox:target img {
  max-width:100%;
  max-height:100%;
}

.lightbox:target ~ #lightbox-controls {
  top:0px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:after {
  width:50px;
}

.lightbox:target ~ #lightbox-controls #close-lightbox:before {
  height:50px;
}

@-webkit-keyframes wiggle {
	0% {
	  -webkit-transform:rotate(2deg);
  }
  20% {-webkit-transform:rotate(-2deg);}
  40% {-webkit-transform:rotate(2deg);}
  60% {-webkit-transform:rotate(-2deg);}
  80% {-webkit-transform:rotate(2deg);}
	100% {-webkit-transform:rotate(-2deg);}
}

Demo

Aquí os dejo una demostración funcional del código anteriormente expuesto. Espero que os sea de gran utilidad y podáis utilizarlos en vuestros proyectos web.

Ver mi Snippet Responsive CSS LightBox by Antonio José (@ajmorales73) on CodePen.

Olvidate del Copy/Paste y ve escribiendo el código poco a poco y viendo los resultados. Así aprenderás y te convertirás en un ninja del diseño web. 😉

No olvides dejarme tus estrellas, likes y compartir en vuestras redes sociales. ¡Gracias!