0

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

Chris
  • 26,744
  • 48
  • 193
  • 345

1 Answers1

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

Community
  • 1
  • 1
Jerome Cance
  • 8,103
  • 12
  • 53
  • 106
  • See my update.. Doing that prevents the rounded corners from rendering – Chris Jan 07 '13 at 13:25
  • look at my post again and look : http://stackoverflow.com/questions/3248734/css3-border-radius-clipping-issues – Jerome Cance Jan 07 '13 at 13:27
  • Try adding `position: relative` to the immediate parent of the image.. The image then escapes the parent's box ignoring the overflow property – Chris Jan 07 '13 at 13:27
  • I've updated my post, I have success when adding the border-radius on the "a" tag and position relative to the artwork div – Jerome Cance Jan 07 '13 at 13:30
  • I can't get this working Jerome - would you mind posting the code? Thanks – Chris Jan 07 '13 at 13:32
  • I've refreshed your page and can't reproduce a working case... Have you changed something ? – Jerome Cance Jan 07 '13 at 13:40
  • Hi Jerome, I was tweaking stuff but have reverted it back to the way it was. Thanks – Chris Jan 07 '13 at 13:41
  • sorry, I can't reproduce it, maybe i've dream or this was the first image which was displayed and not the large one. You can find an alternate solution here : http://stackoverflow.com/questions/10314207/webkit-not-respecting-overflowhidden-with-border-radius – Jerome Cance Jan 07 '13 at 13:48