Code Snippet </> Info
Snippet Name: Pure CSS3 Image Lightbox Using CSS3
Description: Create a nice lightbox effect for your images using pure CSS3.
Example: View Code Demo
Note: Add as many images that you need.
Author: SnapBuilder <snippets@snapbuilder.com>
Last Modified: 2015-08-26 22:35:02
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<!DOCTYPE html>
<head>
<title>Pure CSS3 Image Lightbox Using CSS3</title>
<style type="text/css" media="screen">
/* Begin Pure CSS3 Image Lightbox Using CSS3 */
/* This Script Free To Use Providing This Notice Remains */
/* This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library */
@-webkit-keyframes supersize {0% {-webkit-transform:scale(.9); }
100% {-webkit-transform:scale(1);}
}
body {font-family:verdana,arial,ms sans serif; font-size:90%; color:#000000;background:#f5efe3;text-shadow:0px 1px 0px rgba(0,0,0,0.4);}
img {vertical-align:middle;}
ul {list-style:none;padding:0;}
nav {position:absolute;width:100%;left:0;top:50%;margin-top:-100px;text-align:center;}
nav li {display:inline;margin:0 5px;}
nav img {border-radius:4px;-moz-border-radius:4px;-webkit-box-shadow:0 1px 0 #fff;-moz-box-shadow:0 1px 0 #fff;box-shadow:0 1px 0 #fff;-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear;}
nav a:hover img {opacity:.75;}
nav a:active img {margin-top:1px;}
li[id] {overflow:hidden;position:absolute;width:0;height:0;left:0;top:0;opacity:0;background:rgba(0,0,0,.8);-webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);-moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);-o-transition:opacity 1.2s cubic-bezier(0,0,0,1);transition:opacity 1.2s cubic-bezier(0,0,0,1);}
li[id] a:before {position:absolute;top:-26px;left:-26px;opacity:0;}
li[id] a:hover:before {opacity:1;}
li[id]:target {width:100%;height:100%;opacity:1;}
li[id]:target a {position:absolute;top:50%;left:50%;margin:-220px 0 0 -380px;border:15px solid #fff;-webkit-box-shadow:0 1px 8px #000;-moz-box-shadow:0 1px 8px #000;box-shadow:0 1px 8px #000;-webkit-animation:supersize .8s cubic-bezier(0,0,0,1);}
</style>
</head>
<body>
<nav>
<div>Hover your mouse over the images to see the Pure CSS3 Lightbox Effect.</div>
<ul>
<li><a href="#"><img src="http://farm6.static.flickr.com/5142/5784657719_5928798618_m.jpg"></a></li>
<li><a href="#"><img src="http://farm4.static.flickr.com/3626/5779076533_5f0d0102ea_m.jpg"></a></li>
</ul>
</nav>
<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_146.html">Pure CSS3 Image Lightbox Using CSS3</a> page. ]
</div>
</body>
</html>
|
