Changing shape of hexagon to square when :hover

[andreadardon]

Hi!

I saw this code pen of an octagon (wrongly called hexagon) turning into a square when hovered on. I wanna recreate that on a 300px sized hexagon, but I’ve had trouble knowing what exactly it is that makes the transformation.

This is the codepen: http://codepen.io/EdwinToh/pen/ktaxH

Thanks a lot!

[Paulie_D]

Actually, it’s not changing shape at all.

What’s actually happening is that the internal (bubble) div is rotating. The reason you can’t see the ‘cut-off’ corners is due to the overflow being hidden on the parent div.

I’ve removed that and put a border on the parent so you can see what is actually happening.

http://codepen.io/Paulie-D/pen/QbWwqx

[Author]

Posts