Streaming live at 10am (PST)

Hover effect interactions question


#1

Hi everyone,

I would like to make hover effect like seen here http://www.degordian.com/services/ (if you hover service icons) but I do not know how to do it. Can someone please just let me know the right procedure. I know how to move and change opacity with interactions, but what I do not know is, how to put all this to work together.

thank you for your help.


#2

Check example 5 here : http://interactions.webflow.com/

Start buy building the result (hovered) version of the block. Put another block inside for the dark background color, and make it absolute and fill the white block. Place the elements as siblings of the dark block, give a unique class name to each of the elements inside : icon&title, description, link. Give the withe block overflow:hidden.

Create an onLoad interaction for each of the 3 components. One for the title and icon that make them move down in 0ms, and one for each of the other, making them move down + opacity 0. Make a 4rth onLoad interaction that make the dark block opacity:0.

Now, build the main interaction on :hover of the white block. Add multiple triggers to target each of the 4 elements: the dark background block and the 3 text elements. Make them jump to their original position and vary opacity.


#3