• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

How to Make a Lightbox In Pure HTML and CSS

User avatar
mikethedj4
VIP - Site Partner
Posts: 2576

How to Make a Lightbox In Pure HTML and CSS

Sun Apr 17, 2016 7:47 pm

Learn how super easy it is to make a lightbox effect in pure HTML and CSS! No JavaScript!
Try the weave!
http://kodeweave.sourceforge.net/editor ... 42d0888cae

HTML:

Code: Select all

<input type="checkbox" id="call">
<p>
  <a href="javascript:void(0)" class="pointer">
    <label for="call" class="pointer">check</label>
  </a>
</p>

<label for="call" class="bg"></label>
<div class="content">content</div>
CSS:

Code: Select all

input[id=call] {
  display: none;
}

.bg, .content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all ease-in 150ms;
}

.bg {
  background: #515151;
  background: rgba(0, 0, 0, 0.58);
}

.content {
  margin: 2.6352em;
  padding: 1em;
  background: #fff;
}

input[id=call]:checked ~ .bg,
input[id=call]:checked ~ .content {
  visibility: visible;
  opacity: 1;
}

.pointer {
  cursor: pointer;
}
Image
Image

Post Reply

Return to “Tutorials”