Hover animations stop working when un-hiding div-wrapper

Design help Animations & Interactions
1

Hey there!
Been having this issue where an intro div I’m using for an intro to the page and thus I’ve been designing with it hidden, renders hover animations obsolete, though with it hidden they work perfectly fine.

Any ideas ?
tried looking for clashing classes in interactions and animations, as well as re-making the interactions from scratch.

Here is my public share link:

https://preview.webflow.com/preview/sergiojlloaworks?utm_medium=preview_link&utm_source=designer&utm_content=sergiojlloaworks&preview=17730df675c1ac0821db61d80325ca75&workflow=preview

2

Most likely this div or another element is still covering the elements you want to Hover, hence catching the hover event instead of them… You can’t hover elements that are under other elements. The element on top get the hover event. At least you can’t by default.

Solutions:

  1. get rid of the element. If it’s hidden by an interaction, opacity:0 doesn’t remove the element, it still catches hover event. Display:none is needed
  2. make the element “transparent” to clicks and hover using a CSS rule: use the following custom CSS code in an Embed component inside of the page.
<style>
.class-of-the-element {
  pointer-events: none;
}
</style>
3

Hey Vincent! thanks for your reply, will try the first solution as I can’t use custom code!