No replies
fronjm05
Offline
newbie
Last seen: 13 years 19 weeks ago
Joined: 2009-04-09
Posts: 1
Points: 0

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. Take a look at this link, try hovering over one of the images in the scrollable area at the bottom (should I not post links? it is not an advertising site, just an example):

http://www.fronseetest.com/mednikow/shopitem.aspx

- 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:

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

descriptiondescription

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