Change a page section background on a hover of an Image

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!

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).

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

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?

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!

On 5/10/2024 at 2:31 AM, tuanphan said:

You mean similar this section?

@tuanphan yes exactly!

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

On 5/17/2024 at 1:16 AM, tuanphan said:

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;
}

 

@tuanphan Amazing THANK YOU! 

One LAST question, is there a way to make the color transition (roll in and out) into it so it's not a hard cut when you hover over? 

Thank you so much

On 5/24/2024 at 6:08 AM, smilebeard said:

@tuanphan Amazing THANK YOU! 

 

One LAST question, is there a way to make the color transition (roll in and out) into it so it's not a hard cut when you hover over? 

 

Thank you so much

Not sure.. but try this CSS code

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