If transform: rotate() power the overflow: hidden property to work?

[leoaivy]

I have one site at: http://leoaivy.github.io/projects/poster_inside_2812/html/10_P.03_Timeline.html

You can also see a relative demo at: https://jsfiddle.net/leoaivy/rs3c1zeL/

The problem is: After I created the octagon mask, the popup nested inside this mask wouldn’t be showed anymore. It should be that when I click the icon, the popup must be shown. You can see illustration here:

Before octagon:
https://www.flickr.com/photos/135723081@N04/24013844486/in/dateposted-public/

After octagon: https://www.flickr.com/photos/135723081@N04/23408617374/in/dateposted-public/

Thank you very much!

[Shikkediel]

Please state a clear question, including the relevant style. It’s quite obscure what you are asking for at the moment.

[leoaivy]

Thank you Shikkediel, I just cannot find out the edit button.
Here is an exact example of my problem:
https://jsfiddle.net/leoaivy/husL1x6s/

[Paulie_D]

Well you have overflow:hidden applied…of course the whole thing breaks if you turn it off.

I’d use an SVG mask rather than that complicated structure.

[Author]

Posts