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/