div link only covers half of div

Question

I am trying to create a Create a CSS Flipping Animation based on the code here: http://davidwalsh.name/css-flip but I wanted to also make the entire div on the back of the flip a link, which I found in the answer from @thepeer here: https://stackoverflow.com/a/3494108/1818828*/

I put them together in this jsfiddle here: http://jsfiddle.net/gmdavis62/PB7j8/14/ (Note only tested/designed for webkit so far)

.link{    /*Important:*/
    height:160px;
    width:160px;
    position:relative;
}
.back a span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0px;
  z-index: 1;
}

My problem is that on the flip-side (hover over the image) the link only covers the right half of the div. I have tried adjusting the width and the left attributes with no effect. I also tried moving the empty span and link outside the rest of the content with no change.

My divs have a CSS red outline so I can see where they are and besides the .link being offset, it doesn't explain the link being off. What's happening here?

Answer 1

The h4 headline has a default margin-top. Set it to 0 and you're fine. Fiddle: http://jsfiddle.net/PB7j8/20/

h4
{
    margin-top: 0;
}