Hey there! I'm trying to create a cool effect where two stacked divs inside a parent div slide up and reveal the one beneath it when hovered over. I've managed to make it work, but the transition is not as smooth as I'd like. It seems to flash when the mouse moves around. What I really want is for the top div to stay in place until the mouse leaves the area, and then smoothly slide back down to its original position. Below is the code snippet and a link to the jsfiddle. Any help or suggestions would be greatly appreciated!
HTML
<div class="block">
<div class="top"></div>
<div class="bottom"> Testing</div>
</div>
CSS
.block{
height:304px;
width:304px;
overflow: hidden;
}
.top{
top: 0;
height:300px;
width:300px;
border: solid 2px rgba(0,0,0,0.08);
}
.top:hover{
margin-top: -304px;
display: block;
-webkit-transition:.43s ease;
-moz-transition:.43s ease;
-ms-transition:.43s ease;
}
.bottom{
color: #f8f8f8;
height:300px;
width:300px;
background-color: #CF222D;
border: solid 2px rgba(0,0,0,0.12);
}