ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• April 15, 2016 at 7:27 pm #261856
  BenNieIV

  Member

  Post count: 13

  I am trying to create a class to apply an overlay to specific image banners for better readability. I created a class and applied it to the image banner but I am not seeing any results. Any ideas? Is there any ready options for this or do I need a class like I am creating? I appreciate your help!

  .overlay30 .sf-image-banner>img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: rgba(0, 0, 0, .3);
  }

  April 18, 2016 at 12:37 pm #262133
  David Martin – Support

  Moderator

  Post count: 20834

  Unfortunately, most browsers do not support using :after or :before on img tags.

  Thanks.

  April 18, 2016 at 4:01 pm #262247
  BenNieIV

  Member

  Post count: 13

  Okay.

  Can you add any suggestions on how to accomplish this with an image banner section?

  April 19, 2016 at 6:05 pm #262570
  David Martin – Support

  Moderator

  Post count: 20834

  Sure,

  Likely this:

  .sf-image-banner:before{}

  Thanks.

  April 19, 2016 at 6:33 pm #262576
  BenNieIV

  Member

  Post count: 13

  No luck with this selector either…

  April 19, 2016 at 6:40 pm #262577
  David Martin – Support

  Moderator

  Post count: 20834

  Did you add your class? Your CSS will also require a z-index change.

  It should be:

  .overlay30 .sf-image-banner:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: rgba(0, 0, 0, .6);
      z-index: 3;
  }

  April 19, 2016 at 7:47 pm #262592
  BenNieIV

  Member

  Post count: 13

  That worked perfect!

  Thank you sir!

  April 20, 2016 at 8:20 am #262661
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  Thanks David

  – Kyle

• Back to forum

  Posted in: Atelier