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 >> Pure CSS Lightbox


Code Snippet </> Info


Snippet Name: Pure CSS Lightbox

Description: Add a pure CSS lightbox to your web page.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

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

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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Pure CSS Lightbox</title> <style> /* Begin Pure CSS Lightbox */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} div.lightbox {display:none;position:fixed;left:0px;top:0px;width:100%;height:100%;} div.lightbox:target {display:table;} div.lightbox figure {display:table-cell;margin:0px;padding:0px;width:100%;height:100%;vertical-align:middle;} div.lightbox figure figcaption {display:block;margin:auto;padding:8px;background-color:#ddbbff;height:250px;position:relative;overflow:auto;border:1px #000000 solid;border-radius:10px;text-align:justify;font-size:14px;} div.lightbox figure .closemsg {display:block;margin:auto;height:0px;overflow:visible;text-align:right;z-index:5001;cursor:default;} div.lightbox figure .closemsg, div.lightbox figure figcaption {width:300px;} .closemsg::after {content:"\00D7";display:inline-block;position:relative;right:-20px;top:-10px;z-index:5002;color:#ffffff;border:1px #ffffff solid;border-radius:10px;width:20px;height:20px;line-height:18px;text-align:center;margin:0px;background-color:#000000;font-weight:bold;cursor:pointer;} .closemsg::before {content:"";display:block;position:fixed;left:0px;top:0px;width:100%;height:100%;background-color:#000000;opacity:0.85;} </style> </head> <body> <div id="content"> <h3>Pure CSS Lightbox</h3> <p>Some sample text</p> <p>[ <a href="#example1">Open example #1</a> (left side curved borders) | <a href="#example2">Open example #2</a> (curved borders) ]</p> <div class="lightbox" id="example1"> <figure> <a href="#" class="closemsg"></a> <figcaption>This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.<br /> This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.</figcaption> </figure> </div> <div class="lightbox" id="example2"> <figure> <a href="#" class="closemsg"></a> <figcaption>This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose. This is just some rambling lightbox text placed here to provide enough text for this codes demonstration purpose.</figcaption> </figure> </div> <br /><br /><br /><br /><br /> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_187.html">Pure CSS Lightbox Code Snippet</a> page. ] </p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library