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) >> Lightbox >> Responsive CSS3 Lightbox with No Javascript


Code Snippet </> Info


Snippet Name: Responsive CSS3 Lightbox with No Javascript

Description: Add a responsive CSS3 lightbox using no javascript to your web page.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:38:07

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


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library