I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The `a` tag has styling on it so it extends to `100%` of the width and height of the div.

It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.

I have this HTML structure

```
<div class="player">
 <a href="/player?PlayGuid=123">
    <div class="player__name">
        <h4>Player Name</h4>
    </div>
 </a>
 <div class="player__thumbnail">
    <img src="player.jpg" alt="player desc" />
 </div>
</div>

```

and this CSS

```
.player {
        position:  relative;
        z-index: 1;
        max-width:  250px;
        width:  250px;
        height:  250px;
        max-height:  250px;
        text-align:  center;
        cursor:  pointer;
    }

    .player a {
        display:  none;
        height:  100%;
        max-width: 100%;
        z-index: 12;
    }

    .player__name {
        position:   absolute;
        top:  0;
        left:  0;
        background-color:  rgba(44, 42, 102, 0.6);
        color:  #FFFFFF;
        width:  100%;
        height:  100%;
        z-index: 10;
    }

    .player__thumbnail {
        position:   absolute;
        top: 0;
        left: 0;
        width:  100%;
        height:  100%;
        z-index:  3;
    }

    .player__thumbnail img {
        width:  100%;
        max-width:  100%;
        height:  auto;
    }

```

and the jQuery

```
$(document).ready(function(){
        $('.player').hover(
          function () {
            $(this).closest('a').show();
          }, 
          function () {
            $(this).closest('a').hide();
          }
        );
    });

```