How to Make a Lightbox In Pure HTML and CSS
1 post
Page 1 of 1
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:
Try the weave!
http://kodeweave.sourceforge.net/editor ... 42d0888cae
HTML:
Code: Select all
CSS:
<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>
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023