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

Hi, 

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

intrinsic:hover
img{filter:overlay;
  background-color:FF585D;
}
 

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. 

Thanks, 

Amanda

Hi. What is site url?

If your site is trial/private, you can setup password & share url