CSS: Absolute positioning and overflow: hidden

Question

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

Community · Accepted Answer · 2017-05-23 12:04:33Z

2

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

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Jan 7, 2013 at 13:23

Jerome Cance

8,20312 gold badges55 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Chris Over a year ago

See my update.. Doing that prevents the rounded corners from rendering

Jerome Cance Over a year ago

look at my post again and look : stackoverflow.com/questions/3248734/…

Chris Over a year ago

Try adding position: relative to the immediate parent of the image.. The image then escapes the parent's box ignoring the overflow property

Jerome Cance Over a year ago

I've updated my post, I have success when adding the border-radius on the "a" tag and position relative to the artwork div

Chris Over a year ago

I can't get this working Jerome - would you mind posting the code? Thanks

|

Collectives™ on Stack Overflow

CSS: Absolute positioning and overflow: hidden

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related