SO: Background transition

HTML

<div class="home_wrapper">
    <div class="header">
        <div class="headercontent"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
}
div.home_wrapper {
    width:100%;
    height:100%;
}
/*below here is the issue*/
 div.home_wrapper > div.header {
    width:calc(70% - 5px);
    height:calc(70% - 5px);
    position:relative;
    margin-top:5px;
    float:left;
    background-image:url(assets/13.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    /*so that you can see where it is ->*/
    border:solid 1px #333;
}
.headercontent {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 0;
}
div.headercontent:hover {
  
}