Jump to content

Change a page section background on a hover of an Image

Recommended Posts

Hello, I'm looking for a way to change the background color of a section to a specific background color whenever you hover over a (clickable/linked) image. I'm hoping to have a few different images in the section, each of which would change the background to a different color once you hover them. 

Here is an example: https://hoodzpahdesign.com (scroll down a little)

I have found this tutorial HERE but I'm really looking for a nice fade/transition between colors and not a stark immediate change.

Any help here would be amazing.

Thank you!

Link to comment

Can you share link to your site & let me know which image - which section you want to apply? We can check/test code easier (I think this is possible with some CSS/script, but not sure will have a nice transition).

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 4/26/2024 at 1:15 AM, tuanphan said:

Can you share link to your site & let me know which image - which section you want to apply? We can check/test code easier (I think this is possible with some CSS/script, but not sure will have a nice transition).

@tuanphan Here's a link to my site: https://www.jordanwilsondesigns.com

 

Ideally, it would shift the background of the middle section (with the thumbnails of the work), where you could hover the mouse over each of those 7 thumbnails and each one would change the background color accordingly. Again, the same way https://hoodzpahdesign.com/ does it on their site.

 

Thank you!!!

Link to comment
On 5/9/2024 at 4:26 AM, smilebeard said:

@tuanphan Here's a link to my site: https://www.jordanwilsondesigns.com

 

Ideally, it would shift the background of the middle section (with the thumbnails of the work), where you could hover the mouse over each of those 7 thumbnails and each one would change the background color accordingly. Again, the same way https://hoodzpahdesign.com/ does it on their site.

 

Thank you!!!

You mean similar this section?

image.thumb.png.1f33768e5343849115424177760a20af.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi there, 

I was following this as I was trying to do the same thing and I found this code worked for me:

//background colour change//

body {background: white;
transition: background 0.5s ease;}

body:has(#//your block id here!//:hover)
{background: #99ccff}

Hope this helps!

Link to comment
On 5/12/2024 at 3:59 AM, timjphoto said:

Hi there, 

I was following this as I was trying to do the same thing and I found this code worked for me:

//background colour change//

body {background: white;
transition: background 0.5s ease;}

body:has(#//your block id here!//:hover)
{background: #99ccff}

Hope this helps!

Thanks for jumping in! I just tried this but it isn't appearing to work. I've got a number of custom CSS and code blocks in here that might be interfering somehow? I'm super green to this stuff so most of it is pulling snippets from forums I've scoured haha

Link to comment
On 5/14/2024 at 4:02 AM, smilebeard said:

Thanks for jumping in! I just tried this but it isn't appearing to work. I've got a number of custom CSS and code blocks in here that might be interfering somehow? I'm super green to this stuff so most of it is pulling snippets from forums I've scoured haha

Use this code to Website > Website Tools > Custom CSS (this code for Workshop Hard Seltzer item)

body:has(.fe-block-8970d9c79f63bd6a59ab:hover) .section-background, body:has(.fe-block-8970d9c79f63bd6a59ab:hover) .section-border {
    background-color: #f1f !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.