А макет как выглядит? Может на 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>