| Responsive CSS3 Lightbox with No Javascript - Add a responsive CSS3 lightbox using no javascript to your web page. Example: View Code Demo |
<!doctype html>
<html>
<head>
<title>Pure HTML5 CSS3 Responsive CSS3 Lightbox with No Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/* Begin Pure HTML5 CSS3 Responsive CSS3 Lightbox with No Javascript */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
#content {margin:0; padding:0;}
a {color:#69C;text-decoration:none;}
a:hover {color:#F60;}
a.lightbox img {
height:150px;
border:3px solid #fff;
box-shadow:0px 0px 8px rgba(0,0,0,.3);
margin:10px;
}
.lightbox-target {
position:fixed;
top:-100%;
left:-8px; /* Ok, let's hide the small gap on left side */
width:100%;
background:rgba(0,0,0,.7);
width:100%;
opacity:0;
-webkit-transition:opacity .5s ease-in-out;
-moz-transition:opacity .5s ease-in-out;
-o-transition:opacity .5s ease-in-out;
transition:opacity .5s ease-in-out;
overflow:hidden;
}
.lightbox-target img {
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
max-height:0%;
max-width:0%;
border:3px solid #fff;
box-shadow:0px 0px 8px rgba(0,0,0,.3);
box-sizing:border-box;
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
}
a.lightbox-close {
display:block;
width:50px;
height:50px;
box-sizing:border-box;
background:#000;
color:#fff;
text-decoration:none;
position:absolute;
top:-80px;
right:0; /* designate the close button side */
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
}
a.lightbox-close:before {
content:"";
display:block;
height:30px;
width:1px;
background:#fff;
position:absolute;
left:26px;
top:10px;
-webkit-transform:rotate(45deg);
}
a.lightbox-close:after {
content:"";
display:block;
height:30px;
width:1px;
background:#fff;
position:absolute;
left:26px;
top:10px;
-webkit-transform:rotate(-45deg);
}
.lightbox-target:target {
opacity:1;
top:0;
bottom:0;
}
.lightbox-target:target img {
max-height:100%;
max-width:100%;
}
.lightbox-target:target a.lightbox-close {
top:0px;
}
figure {
margin:0 !important;
padding:0 !important;
}
</style>
</head>
<body style="position:relative;">
<div id="content">
<h3>Pure HTML5 CSS3 Responsive CSS3 Lightbox with No Javascript</h3>
<br />
<p>Simply click on the image to show the lightbox effect.</p>
<br />
<!-- hee hee... the image used for this demo is to make you and I to both laugh.
If you did not find humor in it... sorry, I did! -->
<figure style="padding:0 3em;overflow:visible;">
<!-- just name href="#sterile" to your pics name without the .jpg -->
<a class="lightbox" href="#sterile"><img src="images/sterile.jpg"/></a>
<!-- just name id="sterile" to your pics name without the .jpg -->
<div class="lightbox-target" id="sterile">
<img src="images/sterile.jpg"/><a class="lightbox-close" href="#"></a>
</div>
</figure>
<br /><br />
<div id="link">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_214.html">Pure HTML5 CSS3 Responsive CSS3 Lightbox with No Javascript Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll