Change position of div on hover

[GringoSk8]

Consider following HTML.I have \[code\].image\[/code\] and \[code\].details\[/code\] wrapped in \[code\].wrap\[/code\]. Outside the \[code\].wrap\[/code\], I have another div \[code\].extra\[/code\], 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 \[code\].wrap\[/code\].I am trying following code, does not work:HTML:\[code\]<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>\[/code\]CSS:\[code\].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;}\[/code\]Demo: http://jsfiddle.net/pv9jd/