Jump to content

amainguy

Circle Member
  • Posts

    5
  • Joined

  • Last visited

Posts posted by amainguy

  1. 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

     

     

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

×
×
  • 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.