Lightbox effect with CSS


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



Change the size and color of boxes to be shown

display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
-moz-opacity: 0.8;
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;
overflow: auto;


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.


Read More:

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

Nord VPN Sale

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

Similar Articles


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