Image change on menu hover

Site URL: https://cow-koi-sa4z.squarespace.com

Hello, 

I am wanting to use css to put a block background colour on each of my projects on my homepage. I have edited the main images already with added css to have image appear on hover. However I would just like a block colour behind the title when there is no hover.

I would also like them to all be different colours but I think all share the same class so not sure if it's possible to get them all different. Any help would be greatly appreciated!!!

2 hours ago, Grace_Connolly said:

Site URL: https://cow-koi-sa4z.squarespace.com

Hello, 

I am wanting to use css to put a block background colour on each of my projects on my homepage. I have edited the main images already with added css to have image appear on hover. However I would just like a block colour behind the title when there is no hover.

I would also like them to all be different colours but I think all share the same class so not sure if it's possible to get them all different. Any help would be greatly appreciated!!!

Target the block using it's href, here is sample, you can do the same for later blocks

#gridThumbs [href*="/work/liminalwellbeing"] {
      background: #00bcd4;
}

Thank you so much @bangank36! Such a simple solution.

Very helpful 🙂

Hi again @bangank36, I was hoping you could help with one more thing. Now that I have changed the background of the respected menus, their 'previous' and 'next' buttons at the bottom of their pages now have a background colour on them (except for the liminal wellbeing one, I'm not sure why). Is it possible to remove from the text but leave the background on the menu thumbnails?

3 hours ago, Grace_Connolly said:

Hi again @bangank36, I was hoping you could help with one more thing. Now that I have changed the background of the respected menus, their 'previous' and 'next' buttons at the bottom of their pages now have a background colour on them (except for the liminal wellbeing one, I'm not sure why). Is it possible to remove from the text but leave the background on the menu thumbnails?

 

Should prepend this string in the start, it isoloate the link in grid only

#gridThumbs 

On 5/22/2021 at 11:36 AM, Grace_Connolly said:

Site URL: https://cow-koi-sa4z.squarespace.com

Hello, 

I am wanting to use css to put a block background colour on each of my projects on my homepage. I have edited the main images already with added css to have image appear on hover. However I would just like a block colour behind the title when there is no hover.

I would also like them to all be different colours but I think all share the same class so not sure if it's possible to get them all different. Any help would be greatly appreciated!!!

Do you need fix these issues?

Site URL: https://cow-koi-sa4z.squarespace.com/

1. (Mobile-Homepage) resize this section?

2. (Tablet) Resize section + fix text?