I need to stack two div boxes on top of each other, and my goal is to hide the upper one when it's being hovered over. HTML:
<div id="left_middle">
<div id="rfinder_UP"></div>
<div id="rfinder_DWN"></div>
</div>
CSS:
#left_middle {
position:relative;
float: left;
width: 235px;
min-height: 220px;
background:green;
margin-right: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#rfinder_UP,
#rfinder_DWN {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#rfinder_DWN{
background: url(images/rfinderapp_DWN.png) no-repeat;
}
#rfinder_UP {
background: url(images/rfinderapp_UP.png) no-repeat;
z-index: 10;
}
JS
$(document).ready(function(){
$("#rfinder_UP").mouseover(function(){
$("#rfinder_UP").hide();
});
$("#rfinder_DWN").mouseout(function(){
$("#rfinder_UP").show();
});
});
Now I would like to achieve this by not only hiding the upper div with .hide but somehow pull it out of the left_middle div from the bottom. Is there an easy way to do this? I tried a lot of different other jQuery effects like animate, slideDown etc. but couldn't find a working solution.
Thanks in advance!
A jsFiddle demonstration can be found here: http://jsfiddle.net/qEcp8/ The red box simply disappears on hover revealing the black one. My desired effect is for the red box to slide down, out of the left_middle box.