Background image change on element hover

Design help General
1

Hi there!

I am trying to build my homepage to divide users to go to my personal page or my photography page.

Thus I have two text links at which I want to change the image when the user hovers on each one.

Have everything set up, but no idea on how to achieve so… Tried bringing up opacity to 100% but that just overlaps the image…

Thanks!

Here is my public share link: LINK
(how to access public share link)

2

Seems pretty straight-forward. Could you give a link to your project?

3

Here’s how to add a read only link: :wink:

4

Here it is! Sorry About the delay…

https://preview.webflow.com/preview/lluisballbe?preview=5c95038b43d6d211af4ede2af23bbaac

I wanted the Background image change if either clicking the “professional profile” button or the “Photography website” button. Any tips?

Thanks!

5

Here it is Vlad! Thanks!
https://preview.webflow.com/preview/lluisballbe?preview=5c95038b43d6d211af4ede2af23bbaac

6

Hi @lluisballbe, let me reply while other guys are busy.

You will need to add 2images (or divs with particular background images) inside the “Banner”. Banner should have position: relative nad both images should be position: absolute. Initially, they will have opacity: 0%.
Then you create interaction with Hover trigger for every of buttons:

  • 1st button will make 1st image opacity: 100% on hover and 0% when hover out.
  • 2nd button will do the same but to 2nd image.

Hope my explanation is clear enough.

Regards,
Anna

2 Likes
7

Hi Sabana!

Yes! Clear enough. I’ll try it now and come back if can’t find any errors.

Thank you!

1 Like
8

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