画像をリンク先URLにリンクしていません

Question

私はこのコードを1つのブロックに挿入しました。

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

は、このように、URLを投稿する画像をリンクするためにしようと試み：

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