Jump to content

Help needed adding custom css: color overlay on image block upon hover

Recommended Posts



I'm attempting to create custom css for a client who would like to hover over an image block on her website with her cursor and have an overlay of color appear over the image, at 50%. See attached image for photo for reference.

I already have a custom font installed in lines above, so I need to add additional code to create this effect. I am still learning css via tutorials (please forgive my mistakes/ignorance) but this is what I have so far and I don't know how to fix it. 

@font-face {

    font-family: 'GlamourAbsolute_Reg';

       src: url('https://static1.squarespace.com/static/60874d1bdb18651f658460e2/t/6091d61247f0bf4a4ac94579/1620170258191/GlamourAbsolute_Regular.otf')}

h1 {font-family: 'GlamourAbsolute_Reg';
 text-transform: lowercase;}
h2 {font-family: 'GlamourAbsolute_Reg';
text-transform: lowercase;}
h3 {font-family: 'GlamourAbsolute_Reg';
text-transform: lowercase;}
h4 {font-family: 'GlamourAbsolute_Reg';
text-transform: lowercase;}


What is the issue with the second part of this? Where would I add the overlay percentage? I don't want the color over image to be completely opaque.

Help is very much appreciated! I am on deadline and would be very grateful for some help. 





Screen Shot 2021-06-30 at 2.33.01 PM.png

Link to comment
  • Replies 1
  • Views 477
  • Created
  • Last Reply


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.