Hello,
some beginner task:
I have a container with a headline - nothing else. If the mouse hovers over / enters the container I´d like to fade in a textblock and a button.
I´ve tried it via Interaction and the text/button will fade in / out - but the text and the button are visible in general. So this state, that they are not and only do fade in when the mouse is over the container… I havent found the solution in the web yet.
Only add on is Oxyprops.
Thank´s for suggestions.
It’s all here:
If you want to remove the element - use interaction ‘hide element’. If you want to fade it (but it still takes up space in the DOM) - use a CSS class.
e.g. class= .hide-me and .hello
Create Headline (for hover). Set interaction to mousein - set attribute - attribute CLASS, value ‘hello’ TARGET = ‘hide-me’. Set interaction to mouseout - remove attribute - attribute CLAS, value ‘hello’ TARGET = ‘hide-me’.
Or you can use TOGGLE ATTRIBUTE depending on use case.
Add stuff (e.g. text and button) - give the stuff you want to hide the class ‘hide-me’. Set its opacity (in styles) to 0. It is hidden.
Add custom css somewhere .hello { opacity:1!important; }
Now when you hover the headline it adds the class ‘hello’ and makes it visible. Mouseout and it hides. Use ‘transition: opacity .6s linear;’ - or whatever, to make it fade and not just switch.
Thank you! I´ll give it a try 
Hello,
I am trying to follow your instructions for similar use case (show arrow image on the heading hover).
So I am adding condition on the heading > Trigger: Hover, Action: Set Attribute. What should be the values for a Key and Value? I suppose the Target should be a css selector of the arrow image (id).