Streaming live at 10am (PST)

Background image change on element hover


#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:

http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link


#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


Fullscreen & fixed Position
#7

Hi Sabana!

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

Thank you!


#8

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