Jump to content

How to add a hover color on a. image block with CSS

Recommended Posts

  • Replies 3
  • Views 275
  • Created
  • Last Reply

Top Posters In This Topic

You could add this:

#BLOCK-ID {
   filter: invert(100);
}

But that will just invert the colour.

You'll also have to use the Squarespace ID finder Chrome plugin to ID the image block. Kinda limited in that sense.

Your other option is to turn your buttons into a circle using this code:

.sqs-block-button-element--medium {
  padding: 100px 45px !important;
  border-radius: 50% !important;
}

Then add a hover effect like the below:

.sqs-block-button-element--medium:hover {
  background: #fafafa !important;
  colour: #818181 !important;
}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
22 hours ago, bycrawford said:

You could add this:

#BLOCK-ID {
   filter: invert(100);
}

But that will just invert the colour.

You'll also have to use the Squarespace ID finder Chrome plugin to ID the image block. Kinda limited in that sense.

Your other option is to turn your buttons into a circle using this code:

.sqs-block-button-element--medium {
  padding: 100px 45px !important;
  border-radius: 50% !important;
}

Then add a hover effect like the below:

.sqs-block-button-element--medium:hover {
  background: #fafafa !important;
  colour: #818181 !important;
}

 

Thank you for the options!  I will try doing the button CSS with the added hover effect. 

 

Link to comment

Good luck!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 How I make $500k/year designing Squarespace websites: Watch the video
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
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.