CSS transform rotate works strange on Chrome

HTML & CSS
1

When I check on Firefox, it works great. But when using Chrome (latest version), the transform rotate doesn’t work well. Anyone can help me explain what is happening here ? Sorry for my bad english.

Here my code: Codepen

2

It’s not the solution you want, but it looks nice if you add border-radius to the .ImageOverlay box too. (Sorry, that’s the best I can do.)

1 Like
3

Looks to me like you can add z-index:1 to .team-box

.team-box {
    ...
    z-index:1;
}
2 Likes
4

Thank you for great solution. Hope you explain to me 2 questions:

  1. If I remove overflow: hidden attribute, border-radius will be gone.

  2. Is only z-index fix this problem?

5

I can’t test in FF but I believe this is a webkit bug. Is it only in Chrome?

I can’t do any testing since I’m at work - I’m juste throwing out ideas.

6

Yes. Only the addition of z-index is needed to fix the problem. I notice that your code has changed, though. Is there a problem with the new code? It seems fine to me.

BTW - You said “Thank you for solution”, but @ralphm and had I offered different solutions. You did not say which solution you used

1 Like
7

I used your solution. Also I changed that code and now it working fine to me. Thank you.