HTML CSS Image Lightbox With Toggle Feature | Simple Lightbox

How we can create a lightbox using HTML and CSS? Solution: See this HTML CSS Image Lightbox With Toggle Feature, Simple Lightbox with pure CSS.

Earlier I have shared a Pure CSS Lightbox Gallery, but this is just a simple lightbox with toggle click feature. Basically, Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. But using only HTML and CSS we can also create that kind of effect for expanding image from a thumbnail.

Today you will learn to create Simple Lightbox with toggle click feature. This simple lightbox contains just small image thumbnail, after clicking it will expand to the large or original size, also on second time click it will again small size. That is a kind of toggle, but this very simple method which is based on the link target.

So, Today I am sharing HTML CSS Image Lightbox With Toggle Feature. As you know, Here I have used only HTML and CSS you can call it a pure CSS lightbox example. I think this post will be useful for you, if you are a beginner then you will definitely like this trick for creating the toggle. You also can use it on your website or project.

If you are thinking now how this image box actually is, then see the preview given below.

Preview Of Simple Lightbox

See this video preview to getting an idea of how this design looks like.

Now you can see this visually, you also can see it live by clicking the button given above. If you like this, then get the source code of its.

You May Also Like:

• Ecommerce Product Card Design
• CSS Stylish Checkbox With Tick
• 3D Image Gallery With CSS
• Responsive Flexbox Design

HTML CSS Image Lightbox With Toggle Feature Source Code

Before sharing source code, let’s talk about it. First, I have placed an image two times inside the hyperlink tag using HTML. The first image is for the thumbnail and the second is the full-size image. Also in the HTML file, I have placed some texts and heading. Here I have used a google font for creating beautiful texts (get).

Now using CSS I have placed all the elements like text, image on the right place, as you can see in the preview. In the small image I have placed a class named ‘thumbnail‘ and in the large one, I put nothing. And in the hyperlink tag on the large image, I have placed an ID named ‘img‘. Firstly I gave display: none; to the lightbox.

And I have used the target method to create this program. In the small image I have target the large image using <a href="#img"> tag, and on the large image I have placed the target as blank <a href="#_"> . In CSS file, just put command as on target display will block otherwise none. Left all other things you will understand after getting the codes, I can’t explain all.

For creating this lightbox, you have to create only 2 files for that. One for HTML and one for CSS files, Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

That’s It. Now you have successfully created HTML CSS Image Lightbox With Toggle Feature, Simple Lightbox Feature. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.