Streaming live at 10am (PST)

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


#1

Hi,

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

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). https://university.webflow.com/article/states

Hope that helps
Stu


#3

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


#4

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:
IX1: https://university.webflow.com/article/intro-to-interactions1
IX2: https://university.webflow.com/courses/interactions-and-animations-course

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
Stu


#5

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

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


#6

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?


#7

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.


#8

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

https://preview.webflow.com/preview/purple-spice-restaurant?preview=1968a89a69135a43cfc2eed3cee09642


#9

Thanks for the share link.

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

Any questions, just shout out :smiley:


#10

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.

https://purple-spice.squarespace.com


#11

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)


#12

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)

https://weddingcars-mk.squarespace.com


#13

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.


#14

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.

http://melanie-f.com/en/

Thoughts?


#15

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.


#16

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


#17

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:

CloudApp

#18

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


#19

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

Enjoy.