Hide element on page load

Hello,

I’m trying to hide my service “descriptions” on page load, then make visible on cursor hover for an accordion effect. My cursor hover interaction is working as expected…it’s just that the descriptions are showing when the page first loads, and I have to run my cursor over all of them to hide them. I’ve tried various things like hiding the elements and changing the opacity, but nothing has worked.

Please help!


Here is my public share link: https://preview.webflow.com/preview/tokitabethune?utm_medium=preview_link&utm_source=designer&utm_content=tokitabethune&preview=327195120d8b65185c54b08367242ed8&pageId=5eba33c506f70a28a2b659f8&mode=preview
([how to access public share link] https://tokitabethune.webflow.io/Services

It might be helpful for you to review this tutorial. It shows how to set the initial state of the content so it is not visible on load and only when the trigger is clicked or hovered.

Thank you! I actually watched that video already and had “set initial state” checked…but when I looked back I also had the cursor hover out initial state checked as well, which was causing the issue.