I'm trying to create a design with 2 divs that are the same size. The first one is visible by default, while the second one is hidden initially.
My goal is to achieve an effect where when you hover over the first div, the second one slides upward and covers the first completely. I want the second div to remain in place until you stop hovering over the area.
While I've been able to make the second div move up on hover, it comes with unwanted side effects like a jittery behavior when the two divs are aligned, also in my current implementation, the lower one starts off as visible.
http://jsfiddle.net/cc28samh/1/
The HTML
<div>
<div id="stay-in-place">
<h1>hello world</h1>
<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>
<div id="move-in-to-place">
<h2>I'm on top</h2>
</div>
</div>
The style
<style type="text/css"> #stay-in-place {
position:relative;
height : 200px;
width : 200px;
background: red;
-webkit-transition: height 1s, -webkit-transform 1s;
transition: height 1s, transform 1s;
}
#stay-in-place:hover {
height : 0px;
}
#move-in-to-place {
position:absolute;
height : 200px;
width : 200px;
background: blue;
}
</style>