ad

Lightbox effect with CSS

light

lightbox CSS

In this post, I will show a simple lightbox effect with the use of CSS only. No additional script is needed. As it uses only CSS so faster than other scripting methods. You can use this in any type of website content including images too. See the demo

DEMO  DOWNLOAD

CSS

Change the size and color of boxes to be shown

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

HTML

Change the content as per your need. Add images at the place of the content. Take care of the classes and div if using with many elements on a single page.

<p><a class="demo" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Here</a></p>
<div id="light" class="white_content">This is the light box content. You can change this according to your website content. This can also be added to the images. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>

Download the demo code and use according to your need. Comment below in case of any difficult.

DEMO  DOWNLOAD

Read More:

Create jQuery Twitter Ticker
Simple Fade effect with CSS3
How to apply watermark effect to an image using CSS

Tags:
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker