Streaming live at 10am (PST)

How to change body background color/or image when hover on an element



I’m looking to change body background color on hover a button.

Is there a way to do that?

Thanks for the help

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

Background image transition on hover

Hi @danemare

Yes, it’s nice and easy - watch here to learn about changing the style (eg colour) depending on the state (eg hover, pressed).

Hope that helps


Actually I want to change the main body background color of the page, not the background color of the button


Ahh yes, I just re-read the original message.

Essentially you are looking at the ‘mouse hover over element’ - then ‘affect a different element’ functionality.

Webflow has IX1 legacy interactions and IX2 - more detail here:

In brief terms for IX2:

  • Select your button
  • Open the interactions panel to add an interaction to it
  • Choose mouse hover
  • Start an animation - then + add timed interaction
  • Now you are on the timeline - click the + button and choose ‘bg colour’
  • Then right click the item on the timeline and choose ‘change target’
  • Then select the body on the canvas

Hope that’s useful


I was pretty sure, it would work, but it’s not

my body (Background) is composed of an image background + a color


I’m looking for the same answer, almost found it here. Can you try reducing the opacity to 0% and letting me know how it goes?


Hi @Dids,

Welcome to the forums!
Could you share your read only link for your site?

That way, we can show you using your own site with a screenshot or videocast.


Love that bro, that would make such a big difference.


Thanks for the share link.

Here is how to make the screen change colour on hover when an image is in the background.

Any questions, just shout out :smiley:


You’re a genius! It’s my own fault but I wanted a picture to show up when the user hovers over the options. I should have been more clear but tbh I really didn’t think i’d get a response. I’ve been working on squarespace and only just found this amazing thing named Webflow!

I started working on this site from squarespace, trying to move over with the same design.


You’re welcome.

Well for the images to show up it’s a similar principle. You can use the Display:None setting on each image, then when the user hovers a buttons, set the particular image to Display:Block

There are so many interactions you can achive natively, and with a bit of custom code, you’re quite limitless with what you can do. Take a look at the showcase if you haven’t already to get some inspiration. All of these site were built with Webflow.

The Squarespace site looks great, I think you’ll have a bit more/lot more flexibility with Webflow from what I gather, but that’s your decision to make.

This is the Webflow forums! You’ll ALWAYS get a response! :smile: Trust me, I quit my job because of this place. Hang around, hope you enjoy it.

(I don’t work for Webflow by the way, just a fan of the product)


Thanks Mark, this is perfect. When you have time please have a look at another website that I’d like to build with webflow instead. It was ready to publish but…webflow is my new girl, squarespace has to go.

On a chrome browser if you can (the owner wanted some music in the background but safari doesn’t allow such madness)


That’s beautiful. You’ll have no issue replicating that. You’ve done a lot of work on it already though.

Yeah I’m not overkeen on sites that play music on loading, many designers call it rude to the user. A lot of people when wedding planning will be doing it from work… and that’s not a good experience when they shouldn’t be browsing. I’d at least offer an easy to find mute button. Just my two cents.


Spot on!

In every scenario, the client has the last say, I just make the magic happen.

I like your site bcus its not your average magicians website. I would add some colour to the page, colours that spark emotion…throw in some flavour. Giving your two pence back :wink:

Look at the t*ts on this website. Id say similar to yours in regards to image on one side text on the other.



Should I click this link…? :joy: Not sure what that’s supposed to say.

Yes I like that, it’s a very good idea to add a splash of colour in, that sites taken a bit of a back seat so I really should get it sorted.


Mate…can’t do it. Please show me how to do the same thing but with an image. :pray:t5:


This is a bit long winded, sorry, but stick with it as you get the desired result. :grimacing: :grin:

Let me know how you get on! :crossed_fingers:



:raised_hands:t5: PERFECT :raised_hands:t5:

Someone tell the bosses at webflow that THIS DON needs a pay rise!!!

Thank you thank you, probably would have taken me a week and a new mac before I would have even figured out that I can select the image from the navigator!!


:joy: Haha, I don’t work for Webflow. Just a forum user trying to help out. It’s what it’s here for.

But if @callmevlad wants to pay me then who am I to stop him?! :smiley: