JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div class="mid">
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>

CSS

div {
    width: 200px;
    position: absolute;
}
.mid {
    background: url("http://placekitten.com/200/300");
    height: 200px;
    top: 100px;
    -webkit-transition: all 2s;
    transition: all 2s;
}

.top {
    top: -100px;
    height: 100px;
    background-color: gray;
}

.bottom {
    bottom: -100px;
    height: 100px;
    background-color: gray;
}

.mid:hover {
    height: 0px;
    margin-top: 100px; 
    background-position: 0px -50px;
}