Streaming live at 10am (PST)

Hover interaction... NEED HELP!


#1

http://miketran.design

Can anyone help me recreate this project hover interaction in the website pasted above^?

  • Just wanted to know how to hover over a large area “the project cover” and have just the view project and arrow interacting.
  • Also if anyone knows how to create that arrow movement when you hover over the project that would be awesome as well.

Thank you.


#2

@Vinny Hello, Vinoth! I’ve found a solution for your hover interaction.


You can preview my “View Project Button” demo here: https://preview.webflow.com/preview/recreated-in?preview=70bce4501a7c05b869fdfd908469b001 (you’ll have to do some digging around my project, but look for the page with @ Vinny.

Live Demo here: recreated-in.webflow.io/project-hover-interaction-demo.


The interaction and button layout are a bit more complicated to compensate for the challenge in having the button expand on the x-axis. If you need further help as to how you can create the button yourself, please let me know. Happy designing! :wink:


#3

if anyone knows how to create that arrow movement when you hover over the project that would be awesome as well. Answer, Simply add a button style the button and scroll to image and background → upload an arrow image and set to right, tile to X.
then change the state to hover and go back to the uploaded image and change the position to forward or back and you will be set.


#4

Thanks guys!!! Really appreciate your help!:smiley:


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.