Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Image Effects >> Pure CSS3 Image Lightbox Using CSS3


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 ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library