Reputation: 105
I've setup a page of circular buttons. When the mouse hovers over them individually, they rotate to show the reverse of the button.
It's loosely based on this demo from CoDrops http://tympanus.net/Tutorials/CircleHoverEffects/index4.html
My problem, is that when the mouse hovers over a certain button, I want to reveal the reverse of multiple buttons on the page at the same time (i.e. to flip them).
This works fine in Firefox and mostly OK in Chrome where it not for the buttons becoming clipped at the edges.
Here is the demo site: http://www.qars.co.uk/spumma/v2/
This is how it looks in Chrome when you hover over the middle image: http://cl.ly/image/1K0y1y0t1z2j
Again, works great in FireFox, I just can't see where Im going wrong with Chrome.
Upvotes: 0
Views: 123
Reputation: 375
seems like the issue is with
-webkit-perspective: 800px;
on .ch-info-wrap
Not sure what it does but it seems removing makes it work.
Upvotes: 0
Reputation: 20521
On your .fakeit
CSS rule,
add box-shadow: 0 1px 15px rgba(0,0,0,0.1);
Upvotes: 1