Linking image to post URL not pointing - html

Question

I have this code inserted into one my blocks.
<div data-content="FOR GIRLS" class="image">
<img src="path_to_image"
alt="" />
</div>
<p></p>
<div data-content="FOR BOYS" class="image">
<img src="path_to_image"
alt="" />
</div>
tryed to link the image to post URL, in this way:
<div data-content="FOR GIRLS" class="image">
<a href="link_to_post"><img src="path_to_image"
alt="" /></a>
</div>
<p></p>
<div data-content="FOR BOYS" class="image">
<a href="link_to_post"><img src="path_to_image"
alt="" /></a>
</div>
but when save the changes image still is not linked nowhere..
This is CSS for image class:
.image img {
width:100%;
vertical-align:top;
height:95%;
}
.image:after, .image:before {
position:absolute;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content:'\A';
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width:100%;
color:#fff;
z-index:1;
bottom:0;
padding:0px 10px;
text-align:center;
background:black;
box-sizing:border-box;
-moz-box-sizing:border-box;
padding-bottom: 5px;
}
.image:hover:after, .image:hover:before {
opacity:1;
}
I dont know what is wrong, and why i cant link image in that way. Some tips?

Answer 1

Try this for html:
<div data-content="FOR GIRLS" class="image">
<a class="wrapped__link" href="link_to_post"> </a>
<img src="path_to_image" alt="" />
</div>
and for css:
div.image {
position: relative;
}
.wrapped__link {
position: absolute;
z-index: 3;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
color: transparent;
}