Aleksander Aleksander - 1 year ago 74
CSS Question

:target does not work on my site

I found cool css to create lightbox. It uses :target to show lightbox div. I tried in in code pen and it works fine, however on my site it doesn't show anything. I can't find what else in my code is blocking it from showing. Here's the basic code:


<a href="#img2" class="image">
<img src="">

<a href="#_" class="lightbox" id="img2">
<img src="">


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


and here's my site: Thanks in advance.


Answer Source

Your site url is been routed. Two ways to solve the issue

  1. You are using wordpress framework for your site, so go to the wordpress content admin panel and change your url type.


  1. Add below code at the end of your site.

        var image = $(this).attr("href");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download