CODEWITHSUNDEEP
htmlcssanimation
Kenny Yap
Kenny Yap

Reputation: 1337

CSS Transition Animation Content Overlapping

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

Upvotes: 0

Views: 1554

Answers (2)

limecake
limecake

Reputation: 71

Try adding the css-class:

pointer-events:none;

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

Upvotes: 2

aadarshsg
aadarshsg

Reputation: 2089

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

Upvotes: 0

Related Questions