Question

I am using jQuery 1.7.2

I have thumbnails stacked vertically on the left side of the page. As the user hovers their mouse over a thumbnail, I want a much larger version of that image to open in a div immediately to the right of the thumbnail.

What I want is almost exactly how Facebook does it with their news feed on the top right side of their page.

It’s important to note that the div must FLOAT above everything else on the page.

I have tried creating the divs with a class and putting them immediately after the thumbnail, like this:

<img src="MyThumb-01.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>
<img src="MyThumb-02.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>
<img src="MyThumb-03.jpg">
<div class='HiddenDivUntilThumbnailIsHoveredOver'>

I have also tried using a div with an id and populating it with the photo. This is NOT what I want.

<img src="MyThumb-01.jpg">
<img src="MyThumb-02.jpg">
<img src="MyThumb-03.jpg">
<div id='TheBigPhotoGoesHere'>

So, what kind of div do I need with what kind of CSS to make a div immediately adjacent to to another div that is hovered over?

Answer 1

I would wrap both images within a div with relative positioning, and add absolute positioning to the large image:

http://jsfiddle.net/7sZya/

Or with some fancy CSS transition: http://jsfiddle.net/7sZya/3/

<div class="img">
    <!-- image here -->
    <div class="largeimg"></div>
</div>


.img {
    background:grey;
    height:50px;
    position:relative;
    width:50px;
}
.largeimg {
    display:none;
    height:150px;
    width:150px;
    top:0px;
    left:50px;
    position:absolute;
}
.img:hover  {
    cursor:pointer;
}
.img:hover .largeimg {
    display:block;
    background:black;
}