Animating a Lightbox with CSS & JavaScript

CSSJavascriptWeb DevelopmentFront End Technology

We can style lightbox in our webpage using CSS and JavaScript. The following example styles lightbox.

Example

 Live Demo

<!DOCTYPE html>
<html>
<style>
#parent {
   margin: 2%;
   padding: 0;
   box-sizing: border-box;
   background: cornflowerblue;
   text-align: center;
}
html,body {
   height:100%;
   max-height:100%;
   min-height:100%;
}
.smart {
   display: block;
   margin: 0 auto;
   width: 150px;
   height :150px;
}
.animation2 {
   -webkit-transition: .4s ease-in-out;
   -moz-transition: .4s ease-in-out;
   -ms-transition: .4s ease-in-out;
   -o-transition:.4s ease-in-out;
   transition:.4s ease-in-out;
}
.customLightbox 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: 2;
   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;
}
#close-lightbox:after {
   content: '';
   display: block;
   position: absolute;
   width: 0px;
   height: 3px;
   top: 24px;
   left:0;
   background: white;
}
.customLightbox:target {
   top: 0%;
   bottom: 0%;
   opacity: 1;
}
.customLightbox:target img {
   max-width: 100%;
   max-height: 100%;
}
.customLightbox:target ~ #lightbox-controls {
   top: 0px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:after {
   width: 50px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:before {
   height: 50px;
}
@-webkit-keyframes smart {
   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);}
}
</style>
<body>
<div id="parent">
<h3>Lightbox Example</h3>
<a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/>
<div class="customLightbox" id="picture">
<img class="animation2" src="https://images.unsplash.com/photo-1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/>
</div>
<div id="lightbox-controls" >
<a id="close-lightbox" class="animation2" href="#">Close Lightbox</a>
</div>
</div>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 12:33:17
Advertisements