Looking for a way to add an effect to the code below that opens/closes a div on mouseover above an image. Any examples or suggestions? I'm not exactly a javascript expert.
HTML:
<div>
<div class="under"><img src="http://oi60.tinypic.com/244xp91.jpg" alt="test"></div>
<div class="top">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. aurabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
CSS:
div {
height: 400px;
width: 600px;
}
div > div {
height: 70px;
position: absolute;
}
.under {
background: yellow;
top: 0px;
}
.top {
background: #008285;
bottom: -50px;
top: 330px;
}
.top:hover {
background: #008285;
bottom: 100px;
height: 300px;
top: 100px;
}
JSFiddle: http://jsfiddle.net/2obp1hgL/