CSS Lightbox.css

/* lightbox css */

.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
}

.lightbox img {
	max-width: 95%;
	max-height: 85%;
	margin-top: 5%;
	margin-bottom: 5%;
	-webkit-animation: fadein 500ms; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 500ms; /* Firefox < 16 */
	-ms-animation: fadein 500ms; /* Internet Explorer */
	-o-animation: fadein 500ms; /* Opera < 12.1 */
	animation: fadein 500ms;
}

.lightbox:target {
	outline: none;
	display: block;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
@-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }} /* Firefox < 16 */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }} /* Safari, Chrome and Opera > 12.1 */
@-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; }} /* Internet Explorer */
@-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }} /* Opera < 12.1 */

/* lightbox markup 
<a href="#img1_container"><img id="img_thumb" class="img-fluid" src="" alt="Responsive image"></a>
<a href="#" class="lightbox" id="img1_container"><img id="img1" class="img-fluid img-inline" src="" alt="Responsive image"></a>*/