Change opacity on hover

Design help Animations & Interactions
1

Hi everyone,

I hope you can help me achieve something which I can’t figure out how to do.

At the top of my website, I have three lines. When hovering over one of these lines I want it to change to text, i.e Portfolio, or About Me.

So far, I’ve added the lines and the text above it. I’ve managed to animate the text to disappear and re-appear on hover.

I have added animation to the lines as well and it works when I’m testing it but when I go to preview view, it’s not working any longer.

Would anyone be able to help me with this?

Here’s my link
https://preview.webflow.com/preview/portfolio-0f7a05?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-0f7a05&preview=51d77bad1ab4363f584032d024cda64d&mode=preview

Many thanks
Jonna

2

new link https://preview.webflow.com/preview/portfolio-0f7a05?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-0f7a05&preview=3f977d4baa17be7e2b242052827dcd5d&mode=preview

3

Hi Jonna,

Can you explain the exact animation you’re going for? Should the user see text with lines behind it when they land on the page? And then when they hover over it the lines disappear?

Let me know, and I should be able to help you out!

4

Hi Michael,

Thanks for getting back to me!

When the user lands on the page, I want only the lines to be visible. When the user hovers over the lines, I want them to disappear and instead the text should appear.

5

Hey,

I’ve managed to solve the problem in the end!

Thanks
Jonna

1 Like