Streaming live at 10am (PST)

Background image change on element hover

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…


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

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

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

Here it is! Sorry About the delay…

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


Here it is Vlad! Thanks!

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.



Hi Sabana!

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

Thank you!

1 Like

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