А макет как выглядит? Может на css это проще будет сделать?
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT22Ub6V5ZKEPwoT84tkKu-qaUEN0Vt1hWE8gBDjQgtFAIFYweo" />
<a href="//google.com">Google</a>
</div>
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT22Ub6V5ZKEPwoT84tkKu-qaUEN0Vt1hWE8gBDjQgtFAIFYweo" />
<a href="//google.com">Google</a>
</div>
<style>
body{
text-align: center;
}
div{
display: inline-block;
position: relative;
border: 1px solid gray;
margin: 30px 15px 0;
}
a{
position: absolute;
top: -25px;
left: 0;
width: 100%;
}
img{
opacity: 0.5;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
div:hover img{
opacity: 1;
}
</style>