Colour Image removed on Hover

Hi,

I've seen this question in the forum in a few different places where people are asking for an image to have a colour overlay on hover, however I'm looking for the opposite.

I've attached an example of my design and the effect I'm after. I'd like these (staff photos) on one section of the website to have a colour overlay, which disappears on the hover.

(Website for ref: https://findnorth.uk/home)

Thanks in advance 🙂

To sum up you want them all to be color and then on hover, over an individual image, to be not color? Also when hovered the decolored state should match the green background? Kind of like a sepia effect.

9 hours ago, creedon said:

To sum up you want them all to be color and then on hover, over an individual image, to be not color? Also when hovered the decolored state should match the green background? Kind of like a sepia effect.

Yes exactly that 🙂 For reference the green/teal is #00AA9B

On 8/13/2024 at 3:15 PM, sarah_cowan said:

Yes exactly that 🙂 For reference the green/teal is #00AA9B

You can use this code to Website Tools > Custom CSS

section#home-who .image-block:hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/65bcc6bcea405932b75c37f6/3a077276-77de-42df-9b4b-30e8e610f75c/Staff_Placeholder-11.png?format=500w);
}

3 hours ago, tuanphan said:

You can use this code to Website Tools > Custom CSS

section#home-who .image-block:hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/65bcc6bcea405932b75c37f6/3a077276-77de-42df-9b4b-30e8e610f75c/Staff_Placeholder-11.png?format=500w);
}

 

Hi @tuanphan This works perfectly, thank you so much!!! 😄

These staff images are currently placeholders on the website while I wait for images from the client. I will be adding different staff photos for each thumbnail. I have updated these on the website to show you what I mean. Is there a code I can add so I can update the image URL for each image individually? Thank you!

On 8/17/2024 at 9:33 AM, tuanphan said:

Use some code like this

div#block-yui_3_17_2_1_1723214808527_50690:hover img {
    content: url(https://images.squarespace-cdn.com/content/v1/65bcc6bcea405932b75c37f6/3a077276-77de-42df-9b4b-30e8e610f75c/Staff_Placeholder-11.png?format=500w);
}

Just repeat the code but replace div#block....90 with Image Block ID. Each image will have an ID.

 

Works perfectly! Thank you so much for your help again @tuanphan!