:target does not work on my site - html

Question

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:
HTML:
<a href="#img2" class="image">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>
<a href="#_" class="lightbox" id="img2">
<img src="https://d2d00szk9na1qq.cloudfront.net/Product/2c6b113d-e972-42cc-a2de-f5dcf1c82e95/Images/Large_0297791.jpg">
</a>`
CSS:
.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;
}
(Codepen: http://codepen.io/anon/pen/jrBrmp)
and here's my site: http://test.fulfeal.co.uk/how-to/ Thanks in advance.
Aleksander

Answer 1

Something in your site installation is preventing the URL from changing when the hashtag links are clicked. The :target selector works on the hashtag in the URL.
You will see if you navigate directly to http://test.fulfeal.co.uk/how-to/#img1 the image pops up as expected. So nothing is wrong with your CSS, the issue is with the URL routing on your site.
In codepen the URL isn't changing because the demo box at the bottom has its own iframe, and it is being updated with the link.

Answer 2

Your site url is been routed. Two ways to solve the issue
You are using wordpress framework for your site, so go to the wordpress content admin panel and change your url type.
OR
Add below code at the end of your site.
<script>
$(function(){
$(".image").on("click",function(){
var image = $(this).attr("href");
$(image).show();
});
});
</script>