Change position of div on hover - html

Question

Consider following HTML.
I have .image and .details wrapped in .wrap. Outside the .wrap, I have another div .extra, which I want to hide initially but on hover over the image div only, i want to slide it down so that it takes whole area of the .wrap.
I am trying following code, does not work:
HTML:
<div class="box">
<div class="wrap">
<div class="image"><img src="http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg" /></div>
<div class="details">xxx</div>
</div>
<div class="extra">hidden, show on hover over .image</div>
</div>
CSS:
.box{
border: 1px solid red;
width: 240px;
}
.image{
border: 1px solid green;
position: relative;
}
.extra{
position: absolute;
top: -100%;
left: 0;
background: green;
}
.box .image:hover .extra{
top: 0;
}
Demo: http://jsfiddle.net/pv9jd/

Answer 1

.extra is not a child of .image.
I updated the fiddle by replacing .image with .wrap:hover.
http://jsfiddle.net/UrKCs/2/
I'm not sure if you want that, because now the .extra appears when hovering the whole .wrap div.
I updated it again to have the hover on the image only
http://jsfiddle.net/UrKCs/5/

Answer 2

I believe you are looking for something like this image hover using jQuery
$('.image').hover(function(){
$('.extra').css({'top' : '0'});
},function(){
$('.extra').css({'top' : '-100%'}
);
});​

Answer 3

Sorry to butcher your code but this may be able to help you:
<div class="box">
<div class="image"></div>
</div>
This is the CSS:
.box div{
color: #fff;
width: 200px;
height: 100px;
position: relative;
box-sizing: border-box;
transition: border .7s ease;
}
.image{
background: #fff url(http://farm9.staticflickr.com/8075/8310628243_d48e64dc66_m.jpg) bottom;
border-top: solid 100px #ccc;
}
.image:hover{
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
border: solid 0px;
}
You can read more here for the sliding.
You can also play around here: http://codepen.io/joe/pen/oqxJu