3 ms·
No. For anyone else covering the same dilemma and doesn't care about transitions: https://codepen.io/gschier/pen/HCoqh https://codepen.io/gschier/pen/HCoqh O
by 52-6F-62 9y ago
No.
For anyone else covering the same dilemma and doesn't care about transitions:
https://codepen.io/gschier/pen/HCoqh https://codepen.io/gschier/pen/HCoqh
Or, reduced further:
CSS
.lightbox {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
outline: none;
display: block;
}
HTML
<a href="#img1">
<img src="image.png" class="thumbnail">
</a>
<a href="#_" class="lightbox" id="img1">
<img src="image.png">
</a>
As is, CSS is ~321 bytes
(See CodePen link for code credit. Pretty clever little item, if you don't have to parse the pure markup. Even then it's not overly intrusive.)
Source: I'm currently building out my own Javascript-light blog/cv site, even though I generally like working with React. It's just not needed for everything. I'll likely extend on this at least a bit for some nicer effect with some current Javascript— barring older browsers from the lightbox effect but still able to read the thing in lynx and if need-be.
- klibertp 9y agoSweet! Thank you very much, I'll definitely check it out!
- 52-6F-62 9y agoNo problem! My only qualm is it messes with the browser history— but that's no worse than linking to the full-sized image. It shouldn't affect screen readers or Lynx users too much. I also highly recommend Spectre CSS! I've been toying with it, and it seems like great work. I suggest checking out the "experimental" features. https://picturepan2.github.io/spectre/index.html https://picturepan2.github.io/spectre/index.html