<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Lightbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
/* code by webdevtrick ( https://webdevtrick.com ) (modified by threehymns) */
html, body {
font-family: arial;
padding: 0 2em;
font-size: 18px;
background: #111;
color: #aaa;
text-align:center;
margin-top: 50px;;
}
h1 {
font-size: 3em;
font-weight: 100;
color: white;
}
p {
font-weight: 100;
color: #888;
margin-bottom: 10px;
}
article {
margin: 0 0 20px 0;
font-size: 0.5em;
}
.footer {
margin-top: 80px;
}
.footer a {
text-decoration: none;
font-weight: 900;
color: #56ADFF;
}
a {
text-decoration: none;
}
.thumb {
max-height: 171px;
border: solid 6px white;
border-radius: 2px;
}
.lightbox {
position: fixed;
z-index: 999;
height: 0;
width: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
opacity: 0;
webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.lightbox:target {
outline: none;
width: 100%;
height: 100%;
opacity: 1 !important;
}
.lightbox:target img {
border: solid 17px white;
border-radius: 4px;
opacity: 1;
webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.light-btn {
width: 10px; height: 10px;
color: #fafafa;
/* background-color: #333;
border: solid 3px white;
*/ padding: 20px 20px;/*
border-radius: 50%;
text-decoration: none;
cursor: pointer;
vertical-align: middle;
*/ position: absolute;
top: 45%;
z-index: 99;
font-size: 10vmax;
transition: transform 500ms;
}
.light-btn:hover {
/*background-color: #111;*/
transition: transform 500ms;
}
.btn-prev {
left: 7%;
}
.btn-next {
right: 7%;
}
.btn-prev:hover {
transform: translateX(-3px);
transition: transform 500ms;
}
.btn-next:hover {
transform: translateX(3px);
transition: transform 500ms;
}
.btn-close {
position: absolute;
right: 2%;
top: 2%;
color: #fafafa;
background-color: red;
border: solid 5px white;
padding: 10px 10px;
border-radius: 15%;
text-decoration: none;
font-size: 300%;
line-height: 30px;
}
.btn-close:hover {
background-color: #740404;
}
</style>
</head>
<body>
<h1>Pure CSS Light-Box</h1>
<p id="prova">Click on any image to display the lightbox</p>
<article>Works with any size of image!</article>
<a href="#img1">
<img class="thumb" src="https://unsplash.it/1100/900">
</a>
<!-- first image box webdevtrick.com -->
<div class="lightbox" id="img1">
<a href="#img3" class="fa fa-caret-left light-btn btn-prev"></a>
<a href="#_" class="btn-close">×</a>
<img src="https://unsplash.it/1000/1000">
<a href="#img2" class="fa fa-caret-right light-btn btn-next"></a>
</div>
<a href="#img2">
<img class="thumb" src="https://unsplash.it/400/400">
</a>
<!-- second image box webdevtrick.com -->
<div class="lightbox" id="img2">
<a href="#img1" class="fa fa-caret-left light-btn btn-prev"></a>
<a href="#_" class="btn-close">×</a>
<img src="https://unsplash.it/400/400">
<a href="#img3" class="fa fa-caret-right light-btn btn-next"></a>
</div>
<a href="#img3">
<img class="thumb" src="https://unsplash.it/1366/768">
</a>
<!-- third image box webdevtrick.com -->
<div class="lightbox" id="img3">
<a href="#img2" class="fa fa-caret-left light-btn btn-prev"></a>
<a href="#_" class="btn-close">×</a>
<img src="https://unsplash.it/1366/768">
<a href="#img1" class="fa fa-caret-right light-btn btn-next"></a>
</div>
<p class="footer">Modified From Code By <a href="https://webdevtrick.com">Webdevtrick.com</a></p>
</body>
</html>