CSS Transition Animation Content Overlapping

Question

I would like to ask about, I have made some animation in my website named bubbles. Basically what it does is just to rotate and float some boxes within a given space in the defined content. But i have a problem which is the animated content overlaps with the main content i wanted to display. For example I have <form> inputs but whenever the animation floats to the input boxes, the boxes is unclickable. I would like to send those animation to the background so that it wont obstruct my main UI. How should i do that?

Here is the JSFiddle site to the sample code. You can try clicking on the input forms when the squares float on it.

Thank you

Answer 1

Try adding the css-class:

pointer-events:none;

To all of your animated items, that should do the trick.

Answer 2

Set z-index of .bg-bubbles to -1 . Cheers