Change image filter colour on hover

Site URL: https://parsnip-reindeer-949z.squarespace.com/home

Hi I'm looking to change the colour of my poster images on hover.

So far I've only found CSS for grayscale and other fancy filters but I would like the brand colour #852c9e to be the overlay and then the image changes to the original colour on hover. Similar to this website: https://healthcareaustralia.com.au/

Password: password

Thanks!

On 5/4/2022 at 3:48 PM, organic_emma said:

Site URL: https://parsnip-reindeer-949z.squarespace.com/home

Hi I'm looking to change the colour of my poster images on hover.

So far I've only found CSS for grayscale and other fancy filters but I would like the brand colour #852c9e to be the overlay and then the image changes to the original colour on hover. Similar to this website: https://healthcareaustralia.com.au/

Password: password

Thanks!

 

 

 

You can try the following Custom Css code

section[data-section-id="6271fb781820b01d81f61879"] .sqs-image-shape-container-element:before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s;
  z-index: 1;
}

section[data-section-id="6271fb781820b01d81f61879"] .image-block:hover  .sqs-image-shape-container-element:before {
  background-color: rgba(76, 33, 119, 0.6) !important;
}

section[data-section-id="6271fb781820b01d81f61879"] .image-overlay {
  background-color: unset !important;
}

Let me know how it goes on your site

Brilliant, thank you that worked!