CSS lightbox with animation effects

Learn how to create custom pure CSS lightbox with nice animation effects.

I am creating for every designer everyone can use this very easy code on any custom website.

Here everything is available you can check the live demo or also download the source file and use anywhere.

HTML

<h2>CSS Lightbox with animation</h2>
<a href="#image1" class="show-image"><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="close-button" class="short-animate">
    <a id="close-lightbox" class="long-animate" href="#!">Close Lightbox</a>
</div>

CSS

html, body {
  height: 100%;margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-height: 100%;
  background: #476C9B;
}
h2 {
  font-weight: 200;
  font-size: 40px;
  padding: 20px 0;
  text-align: center;
  color: #fff;
}
.show-image {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 150px;
  box-shadow: 8px 8px 1px 0 rgba(0, 0, 0, .15);
}
.show-image: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%;
}
#close-button {
  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~#close-button {
  top: 0px;
}
.lightbox:target~#close-button #close-lightbox:after {
  width: 50px;
}
.lightbox:target~#close-button #close-lightbox:before {
  height: 50px;
}
@-webkit-keyframes show-image {
  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);
  }
}

3 Comments

  1. […] You can check the live demo or you can also download source file then you modify as you like and use on your website. you can check me another tutorial on how to create CSS lightbox with animation effects. […]

  2. mobile legends hack generator without human verification
    mobile legends hack generator without human verification

    It’s really a nice and helpful piece of information. I’m satisfied that you simply
    shared this useful information with us. Please stay us informed
    like this. Thanks for sharing.

  3. mobile legends hack
    mobile legends hack

    If you are going for best contents like I do,
    simply pay a quick visit this website everyday as it offers quality contents, thanks

Leave a Reply