Hey all!
I’ve been trying to make a gallery and the effect should be, when I hover over a certain image, a colored box should appear below it, with name and stuff.
So if I were to do that programmatically I would put a jquery listener to one object and change the other object class or css properties directly. Do I have to do that here as well or is there another, more direct way to go about it?
Thanks!
You can definitely do this using interactions instead of adding the code yourself.
Hey, thanks Darian, that’s a relief.
But could you care to elaborate a little? How could I do that? I’ve managed to make the element invisible and when hovering it, make it visible, but that was a work around. How do I make it slide in, for example, if I hover over another element?
Sorry if I’m unclear, its always hard to explain interactive animations, right?
Sure. What you want to do is first hide the element that you want to appear below when someone hovers over your image by setting an interaction with just an initial appearance with opacity set to 0% and set the move option to go up under your image.
Now on the image you want to make the hover interaction. Create a new interaction with no initial appearance. On the trigger section you want to select hover. Now what you want to do is check the box that says ‘affect different elements’. In the entry below it you would add the class that you named the box you want to appear on hover.
Now all you need to do is set the opacity back to 100% and click the move option to set it back to origin on the hover over section, then on the hover out set the opacity back to 0% and move the element back under the image.
That should do it. Give it a try and see if that works for you.
EDIT: If you don’t want a fade in due to the opacity changes you can disregarding using opacity settings, just make sure the element is hidden behind the image when you use the move option by changing its Z-index to a negative number.
GRRREAT!!!
Thank you Darian! I didn’t notice the interaction where it was.