將圖像鏈接到發佈的URL沒有指向

Question

我將此代碼插入到我的一個塊中。

<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到圖像信息的鏈接網址，以這樣的方式

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

但當保存更改圖像仍未無處掛..

這是CSS的圖像類：

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

我不知道什麼是錯的，爲什麼我無法以這種方式鏈接圖像。一些技巧？

Answer 1

嘗試此HTML：

<div data-content="FOR GIRLS" class="image"> 
    <a class="wrapped__link" href="link_to_post">&nbsp;</a> 
    <img src="path_to_image" alt="" /> 
</div> 

和CSS：

div.image { 
    position: relative; 
} 
.wrapped__link { 
    position: absolute; 
    z-index: 3; 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-decoration: none; 
    color: transparent; 
}