CSS3 Image Popout Example (Code Snippet)

<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;
}

CSS3 Image Popout Example

Share Code Snippet