I am currently experimenting with creating an image that fades in along with its background when clicked using the :target selector. (Similar to Lightbox: , but done purely with CSS).
Here is the HTML:
<a href="#firstimg"><img src="img/thumb-3.jpg"></a>
<a href="#secondimg"><img src="img/thumb-4.jpg"></a>
<a href="#" class="lightbox" id="firstimg"><img src="img/image-3.jpg"></a>
<a href="#" class="lightbox" id="secondimg"><img src="img/image-4.jpg"></a>
CSS:
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
text-align: center;
background: rgba(38, 38, 38, 0);
transition: background 0.3s ease;
}
.lightbox img {
max-height: 90%;
max-width: 70%;
margin: 3%;
border-radius: 5px;
border: 5px solid #cbcbcb;
}
.lightbox:target {
display: block;
background: rgba(38, 38, 38, 0.7);
}
The only issue I am facing is that it doesn't seem to work. I have tested it with other elements and they worked fine. Any suggestions? Thank you.