How to Create Pure CSS Lightbox without Javascript

Author
In CSS Overlay, CSS Tutorial Last updated Mar 10, 2017
Pure CSS Lightbox

In today’s tutorial, I am going to take a look at the creation of pure CSS lightbox without using Javascript or Jquery. If you search on google, you will find a lot of solution about lightbox, but I am sure you many can’t find a solution which will work with pure CSS. The CSS3 powerfull and have the ability to do anything which Jquery or javascript do.

When pressing the restrictions of what’s possible with CSS, it certainly is fun to eliminate extra elements from our code. In this full case, I’m going to remove the javascript that is frequently use whenever a lightbox is necessary. We’re also heading to include some fancy CSS3 animation, even though we’re at it, let’s get this to sucker responsive too. Oh – and we’re not heading to use any media queries. Curious now?

Pure CSS Lightbox Considerations

There are a few considerations to debate before we start off. While taking away Javascript is excellent, it isn’t always necessarily as efficient, as it could do things such as insert in content, eliminate markup, etc. This demonstration is not heading to be the ultimate way to handle all situations that want a lightbox. That said, it’s attractive stinking awesome that can now be achieved using pretty basic CSS techniques, not think?

It has been tested in every modern variant of Chrome-, Safari, Opera and Firefox. I couldn’t care less about IE about demos, but if there are bugs in IE even, I understand it’s with the capacity of most everything being utilized here.

Pure CSS Lightbox Markup

The markup is simple and easy to understandable. We have a button, in fact, it’s a label which will be handled using checkbox. So you can say our button will define as checkbox but it will be hidden, and the label HTML element will take the place of it.

We have wrapped the checkbox inside the lightbox class, and you can also see another label which will use for transparent background color.

 <label class="hero button" for="lightbox-1">Launch Lightbox</label> <aside class="lightbox"> <input type="checkbox" class="state" id="lightbox-1" /> .......... <label class="backdrop" for="lightbox-1"></label> </aside> 

For content, we have a class content which is defined within the article HTML5 element. Then we have a heading and a close button. The close button also represents using the label. Both heading and a close button set inside the header HTML5 element.

 <article class="content"> <header class="header"> <h3 class="h h3">Lorem Ipsum</h3> <label class="button" for="lightbox-1">&times;</label> </header> ............ </article> 

We try to keep each section separately so that it can be easily understandable. As for as content, we have defined the main HTLM5 element, and here you can place your lightbox content.

 <main class="main"> <p>Lightbox Content Goes Here.</p> </main> 

Styles

First of all, we will do the styling for the button. We have done some basic style, and you can do as you want to look like your button. We have added some background color and transition.

 .button { cursor:pointer; display: inline-block; margin: 0; padding: 10px 15px; background-color: #f39c12; border: none; color: #fff; text-align: center; font-size: 14px; font-weight: bold; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; } 

For lightbox, we have used the position fixed to align the box center of the body. That’s the reason we set the all of the value of position set to zero.

 .lightbox { position: fixed; top: 0; right: 0; left: 0; height: 0; padding: 0 20px; } 

For light box, we set the position relative and then added width and height. We also added transform so that it will come in a nice way.

 .lightbox .content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: relative; z-index: 2; max-width: 500px; max-height: 95vh; margin: 20px auto; padding: 20px; background: #fff; -webkit-transform: translateY(-200%); transform: translateY(-200%); -webkit-transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s -webkit-transform ease-in-out; transition: 0.3s transform ease-in-out; transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out; border: 1px solid rgba(0, 0, 0, 0.1); } 

There are few more things we have done, but for background transparent color, we have set position fixed with RGBA background color.

 .lightbox .backdrop { position: fixed; top: 0; right: 0; bottom: 100%; left: 0; opacity: 0; background: rgba(0, 0, 0, 0.3); -webkit-transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s; transition: 0.3s opacity ease-in-out, bottom 0.1s 0.3s; } 

Now I think it’s time to show you demo so have a look the demo here.

Leave a Reply

Your email address will not be published. Required fields are marked *