Just a simple image that uses some jQuery to fade some content over the top when moused over.
Only problem is that when the hover over takes effect, the hover spills into the div gutter making the hover over bigger than the actual container.

each image is layed out like so 

```
<li class="large-4 columns item">
<div class="description"><h1>Image hover</h1><a href="#"></a></div>
<img class="display" src="http://placehold.it/400x300">
</li>

```

Can see a live example here.
<http://jsfiddle.net/QLUMH/>

Any ideas on ways to fix/improve what I am doing here? Cheers