Have a hex code overlay effect on gallery thumbnails on hover

Site URL: https://chartreuse-gold-tl9a.squarespace.com/

I've achieved a faded/overlay-on-hover effect upon my gallery thumbnails on my about page using this code:

a img.thumb-image:hover {
  background-color: #c043cb;
   transition: .70s ease;
  opacity: .70;}

However, I want the background colour which is a purple to show instead of what seems to be the default grey.

Anyone know how to help? Thanks!

Abby

Website: https://chartreuse-gold-tl9a.squarespace.com/

Password: sparklefox

On 5/27/2021 at 4:26 AM, abbydamen said:

Site URL: https://chartreuse-gold-tl9a.squarespace.com/

I've achieved a faded/overlay-on-hover effect upon my gallery thumbnails on my about page using this code:

 

a img.thumb-image:hover {
  background-color: #c043cb;
   transition: .70s ease;
  opacity: .70;}

 

However, I want the background colour which is a purple to show instead of what seems to be the default grey.

 

Anyone know how to help? Thanks!

Abby

 

Website: https://chartreuse-gold-tl9a.squarespace.com/

Password: sparklefox

Add to Design > Custom CSS

/* About-Slide hover */
body#collection-60adad0db88e982a72921e0e {
.slide a:after {
    content: "";
    display: block;
    background: rgb(128, 0, 128, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}
.slide:hover a:after {
    opacity: 1;
    transition: all 0.3s;
}}

Absolutely fantastic THANK YOU SO MUCH! 🙏

What if I want to apply the same effect to blog posts? Does something needs to go in place of the below? Thanks!

body#collection-60adad0db88e982a72921e0e {

On 5/31/2021 at 9:53 AM, abbydamen said:

Absolutely fantastic THANK YOU SO MUCH! 🙏

 

What if I want to apply the same effect to blog posts? Does something needs to go in place of the below? Thanks!

body#collection-60adad0db88e982a72921e0e {

You mean this page? https://chartreuse-gold-tl9a.squarespace.com/blog

Yes, that page. E.g. how would you apply the same overlay to a blog? How would you apply the same overlay to a summary block?

I managed to do a black and white feature on the blog – am more interested in the summary block if you know and are able to help? Thanks.

Abby