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.
Help needed adding custom css: color overlay on image block upon hover
in Customize with code
Posted
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