---

Preview

Code

<style>
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
text-align:center;
color:white;
}

.modal:target{
display:block;
}

.modal img{
margin-top:80px;
max-width:400px;
}
</style>

<a href="#img5">
<img src="https://via.placeholder.com/120">
</a>

<div id="img5" class="modal">
<a href="#">
<img src="https://via.placeholder.com/400">
</a>
<p>Image caption</p>
</div>

More CSS Image Modal Examples (8)