<div class="image-popout">
<input type="checkbox" name="tab" id="image1">
<label class="l1" for="image1">
<img src="https://placehold.co/250x250" width="250" height="250" alt="">
</label>
<label class="l2" for="image1">
<img src="https://placehold.co/150x150" width="150" height="150" alt="">
</label>
</div>
<div class="image-popout">
<input type="checkbox" name="tab" id="image2">
<label class="l1" for="image2">
<img src="https://placehold.co/250x250" width="250" height="250" alt="">
</label>
<label class="l2" for="image2">
<img src="https://placehold.co/150x150" width="150" height="150" alt="">
</label>
</div>
.image-popout {
z-index: 9999;
display: inline-block;
}
.image-popout .l1 {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
}
.image-popout .l1 img {
position: fixed;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.image-popout input[type="checkbox"] {
display: none;
}
.image-popout input[type="checkbox"]:checked ~ .l1 {
display: block;
}
