div鼠标悬停上的动画叠加

Question

我正在尝试为div上的鼠标悬停效果设置动画。现在，没有动画，但它工作正常。当我将鼠标移过来时，我希望红色背景向上滑动。

＆＃13;

＆＃13;

content section.work-row div {
    height: 400px;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.box {
    height: 100%;
    border: none;
    display: inline-block;
    vertical-align: top;
    z-index: 5;
}
.overlay {
    position: relative;
    z-index: 5;
}
.dont-show {
    z-index: 50;
    opacity: 1;
}
.overlay:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.overlay:hover:after {
    opacity: .7;
    visibility: visible;
    -webkit-transition: top 0.6s ease-in-out;
}
.overlay:hover .dont-show {
    visibility: visible;
    -webkit-transition: top 0.6s ease-in-out;
}
.red-body:after {
    background-color: red;
    -webkit-transition: top 0.6s ease-in-out;
}
.overlay .dont-show {
    position: relative;
    top: 320px;
    left: 10px;
    visibility: hidden;
    z-index: 50;
}
.white {
    color: white;
    opacity: 1;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="white">
    <div class="col-md-4 col-sm-6 col-xs-12 box overlay red-body" style="background: url('assets/images/home_header.jpg') no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;">
        <div class="dont-show">
            <h1 class="white">Header</h1>
            <h3 class="white">sub header</h3>
        </div>
    </div>
</a>

＆＃13;

＆＃13;

＆＃13;