Clickable Container with Fading Content

HTML

<div class="box">
    <a href="http://www.binarymoon.co.uk/" class="image-overlay"  style="background-image:url(http://placekitten.com/300/160);"></a>
    <div class="meta">
        <h1><a href="http://www.binarymoon.co.uk/">Title</a></h1>
        <p>A paragraph of text goes in here</p>
    </div>
</div>

<div class="box">
    <a href="http://www.binarymoon.co.uk/" class="image-overlay"  style="background-image:url(http://placekitten.com/303/160);"></a>
    <div class="meta">
        <h1><a href="http://www.binarymoon.co.uk/">Title</a></h1>
        <p>A paragraph of text goes in here</p>
    </div>
</div>

<div class="box">
    <a href="http://www.binarymoon.co.uk/" class="image-overlay"  style="background-image:url(http://placekitten.com/300/161);"></a>
    <div class="meta">
        <h1><a href="http://www.binarymoon.co.uk/">Title</a></h1>
        <p>A paragraph of text goes in here</p>
    </div>
</div>

<div class="box">
    <a href="http://www.binarymoon.co.uk/" class="image-overlay"  style="background-image:url(http://placekitten.com/301/161);"></a>
    <div class="meta">
        <h1><a href="http://www.binarymoon.co.uk/">Title</a></h1>
        <p>A paragraph of text goes in here</p>
    </div>
</div>

CSS

body {
    font-family:arial, sans-serif;
    margin:0; padding:0;
}
.box {
    width:50%;
    height:200px;
    border:1px solid #eee;
    float:left;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
}
.box h1 {
    margin:0;
}

.box a.image-overlay {
    display:block;
    height:100%;
    width:100%;
    background-position:center center;
    background-size: 100% auto;
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box a.image-overlay:hover {
    opacity:0.1;
    background-size:110% auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.box .meta {
    padding:20px;
    background:#000000;
}