Jump to content

Image change on menu hover

Recommended Posts

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

Link to comment
  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply
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;
}

image.thumb.png.dc9dbc93cc525fd71708618d7ae61673.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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?

 

Link to comment
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 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 weeks later...
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?

cow-koi-sa4z.squarespace.com-01-min.png

2. (Tablet) Resize section + fix text?

cow-koi-sa4z.squarespace.com-02-min.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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.