amainguy

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