Overflow:Hidden + a:hover = Image not so hidden

[Preno23]

I am currently working on a website in which I am displaying a product images inside a separate circular div tag (border-radius: 50% ….). The Image itself is too wide so i have used the good old the over-flow:hidden/position:relative tick to “cut” the image to size. The problem I am now having is when I hover a div, my images in other circles, for a split second, appear over the border before going behind again.
To add to the confusion there is no such problem original when testing in Firefox or safari (I cant face the music testing in IE yet haha)

I am running the website locally.

Preno23

[Preno23]

I tried add my code (html/php/css) but since i am using php to grab my images/data from a localhost db they don’t appear so I cant set it up. All I can do ( i think) is use screenshots to explain better. No problem if you cant do anything, I’ll get another coffee and do some more digging ha

Btw great site!!

[Paulie_D]

Recreating the problem with dummy images in Codepen often leads to a Eureka moment.

[Author]

Posts