fill کردن div با تگ a

[IMANAZADI]

سلام

دوستان کد زیر را در نظر بگیرید




<div class="c" >
<a href="#">
<span>this is test</span>
<img src='easymoblog.png' class="lm" alt="">
</a>
</div>



اینم استایلش



.c
{
float:left;
position:relative;
width:120px ;
height:120px;
margin:5px;
border:solid 1px #B0C4DE;
border-radius:3px;
background-color:#B0C4DE;
-webkit-transition: all ease-out 0.2s;

}


.c:hover
{
-webkit-box-shadow:0px 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all ease-out 0.2s;
}


span
{
position:absolute;
text-align:center;
width:100%;
height:20px;
transition:all ease-in-out 0.3s;
bottom:0;
color:#000;
background-color:#fff;
}






.lm
{
width:50px;
height:50px;
border:solid 1px #9C8C8C;
border-radius:3px;
margin-top:20%;
margin-left:auto;
margin-right:auto;
display:block;
}


a{ width:100%;
height:100%;
display:block;}



وقتی اجرا میشه همه چی درست هست ولی فقط یک ایراد داره اونم اینه که تگ a کل div رو پر نمیکنه وقتی بالای div میرم لینک عمل نمیکنه
چکار کنم درست بشه ؟؟؟

[Moien Tajik]

تگ a رو بیرون از div بزارید : https://jsfiddle.net/anonymousboy/m3d08xnq/