How to Make a Lightbox In Pure HTML and CSS

1 post Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

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;
}
1 post Page 1 of 1
Return to “Tutorials”