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

The view. more "button" is actually an image you can click that leads to another page and was wondering if there was a way to add. a color hover over it,  image is attached with the example. 

here is the link to page with image block/"button".

https://www.erinncapko.com/surface-design

Thank you in advance!

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

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. 

Good luck!