0

I'm learning how to animate with CSS3 and wanted to make a simple "on hover show detail" image

I styled the container of the image to have a nice border radius, however the content as well as the overlay both clip over the edge of the radius even though overflow: hidden was applied

i realize there are some topics similar to this however most do not have a resolved answer.

any help?

my code : http://cdpn.io/rlnkz

Jack Dalton
  • 3,536
  • 5
  • 23
  • 40
  • Just a note that I can reproduce the issue running the latest stable Chrome, but the issue is not present in Chrome Canary. This indicates that it's likely a bug with Chrome. – André Dion Jul 25 '13 at 18:40
  • This may be a [duplicate](http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera). – André Dion Jul 25 '13 at 22:38

1 Answers1

0

It seems to be a bug with Chrome. You can work around it by duplicating your border-radius on .image and .overlay.

Here's the updated pen.

Edit

Here's another SO thread that looks like the same issue.

Community
  • 1
  • 1
André Dion
  • 21,269
  • 7
  • 56
  • 60
  • I tried that already, but to get the radius the same is pretty much impossible without hacking it in. Do you think there is anyway of getting around this? – Jack Dalton Jul 25 '13 at 18:50