Scrollable DIV and show enlarged Image on Hover

scroll div show enlarged image on hover

[fronjm05]

Hello, I have created a div with overflow:hidden; so I can scroll right to left through some images. However when I hover over any of the images in the scrollable DIV, there is CSS that shows a larger version of the image right above the thumbnail image. I can post an example link, not sure if this is allowed though.

- Notice on hover, the larger image is cut off, how do I show this full image? Im setting this pop out image's css as absolute and a higher z-index. I would think this would work, but pretty sure that overflow:hidden set on the scrollable div is breaking it, but I need this to make the scroll work. Any help here guys? Posted below is my HTML and CSS, I actually have a link I can post but not sure if I can do that. Thank you much.

HTML:
<div id="boxes_wrapper" class="Boxes_Wrapper" >
<div id="boxes_content" class="Boxes_Content" >
<div class="hoverbox">
<div class="li_div"><a href="#"><img src="smallthumb" alt="description" /><img src="largethumb" alt="description" class="preview"/></a></div>
<div class="li_div"><a href="#"><img src="smallthumb" alt="description" /><img src="largethumb" alt="description" class="preview" /></a></div>
<div class="li_div"><a href="#"><img src="smallthumb" alt="description" /><img src="largethumb" alt="description" class="preview" /></a></div>
<div class="li_div"><a href="#"><img src="smallthumb" alt="description" /><img src="largethumb" alt="description" class="preview" /></a></div>
<div class="li_div"><a href="#"><img src="smallthumb" alt="description" /><img src="largethumb" alt="description" class="preview" /></a></div>
[...]
</div>
</div>
</div>

CSS:
.Content_Wrapper,.Boxes_Wrapper
{
overflow:scroll;
position:relative;

}
.Content,.Boxes_Content
{
position:absolute;
top:0;
left:0;
}

.Boxes_Wrapper
{
width:598px;
height:94px;
top:5px;
left:5px;
white-space:nowrap;
}

.hoverbox
{
width:800px;
}

.hoverbox a
{
cursor: default;
position: relative;

}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox .preview
{
border-color: #000000;
width: 200px;
height: 200px;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display:block;
position:absolute;
top: -195px;
left: -60px;
z-index:200;

}

.hoverbox img
{
background: #ffffff;
border-color: #aaaaaa #cccccc #dddddd #bbbbbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 70px;
height: 70px;
}

.hoverbox .li_div
{
background: #fffced;
border-color: #dddddd #bbbbbb #aaaaaa #cccccc;
border-style: solid;
border-width: 0px;
color: inherit;
float: left;
padding-left: 5px;
padding-right:5px;
position: static;
}

- Any help to get the larger hover images to not get cut off! THank you much. Joe

[edited by: swa66 at 10:48 pm (utc) on April 9, 2009]
[edit reason] No personal URLs, made it a bit shorter as well. [/edit]

[swa66]

Welcome to WebmasterWorld! [webmasterworld.com]

I haven't tried it, but overflow has 2 siblings in CSS3: overflow-x and overflow-y where you can set overflow properties on each axis individually.

While this is CSS3, it is already implemented in just about any browser in use today.