please see this example i have created
http://sudhakargolakaram.co.in/hover.html

when i hover over a link i want to display an image i have used the following code

initially i had

<div id="div1">
     <a href="#">mouse over to see a hidden image<br />
    <div class="div2">
    <img src="greeting2.jpg" />
    <p>Lorem ipsum dolor sit amet, consetetur sadi pscing sed diam</p>
        <p>Erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea  rebum. Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam</p>
    </div>
    <!-- div2 ends -->
</div>
<!-- div1 ends -->

#div1{
    float: left;
    width: 900px;
    height: auto;
}

.div2{
    visibility: hidden;
}

#div1 a:hover .div2{
    visibility: visible;
}

however this is not working, since div2 is contained within div1 i thought i could manupilate the content of div2


my point is if i can get this to work instead of showing just 1 element for example an image i can show more than 1 element which is inside a div
for this feature to work should i be using javascript and get the id of div2 and for onmouseover for the link in div1 should i make the entire div2 visible or is this possible using only css and not with jquery


also another question if i had div2 lets say in the right column and div in the left column of the layout, obviously in this case both div1 and div2 would be independent to each other, and in this case if i hover over the mouse in div1 and i wanted to display the entire content of div2 which consists of more than 1 element, in this case i guess i will have to use onmouse javascript and write a function to display div2 using getElementById() am i correct


please advice

thanks