CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 27384

CSS: Absolute positioning and overflow: hidden

I am attempting to make a thumnail viewer whereby when you roll your mouse over the thumbnail, you get a thumbnail sized view of a larger email. As you move around the thumbnail youll see various parts of the larger pictures.

You can see this here by rolling over the last (green) image.

When you roll over I swap images between the low res thumbnail and a higher res version. For some reason this larger image is no longer bound by the overflow: hidden property of the parent. What do I have to do to get this to work?

Update

The position: relative property is currently set on the parent above the .artwork container that currently provides the overflow: hidden. Adding overflow: hidden to the top level container works correctly but seems to negate the rounded border effect...

Upvotes: 0

Views: 3467

Answers (1)

Jerome Cance
Jerome Cance

Reputation: 8183

use position:relative on your parent block.

This is because our child div is absolute positioned. But when you use absolute position, it refers to the first positionned parent. The first positionned parent is the first one to have a position: relative (or absolute) property

for the border radius problem, this is a firefox and chrome bug you can fix by using hacks. See it here :

CSS3 border-radius clipping issues

EDIT : To summarize :

add position: relative to the div artwork. then add your border radius to the "a" parent tag

Upvotes: 2

Related Questions