jpwelchux

I'm on 7.1 , and I'm using one of the "headline" sections that gives you a background image with text and button over top.

My issue is that by default there is an opacity: 0.15 on the image and it looks washed out. 

How can I set the opacity to 0 for my background image so it's full color?

This code used to work:

  .section-background-overlay{
      opacity: 0;
  }

Now, the above opacity is crossed out and this appears to be controlling the opacity:

element {

    opacity: 0.15;

}

In the HTML it looks like there are several data controller tags like: data-image-overlay-opacity="0.15" Basically, I'm unclear how to reference this in css as it's not referencing a specific class or ID.

How can I set the opacity to 0 for my background image so it's full color?

3 minutes ago, tuanphan said:

@jpwelchux remove above and use this

.image-block-outer-wrapper.design-layout-card {
    box-shadow: -1px 2px 10px 4px rgba(0,0,0,.07);
}

 

This is it! Thank you so much @tuanphan!

@tuanphan this is awesome thank you so much! I've tweaked the shadow and it's looking good. 

One more question. It looks like the shadow applies to all images. Any idea if just the image cards can have the shadow?

@tuanphan Thank you! You'll see all of the image cards have a slight gray background. I'd like to give that edge a soft modern drop shadow. 

https://oboe-oarfish-b2zr.squarespace.com 

turkeydogs

(wells template)

I have an image block: card on my page, and I'd like to have a drop shadow around the card. Does anyone know some css for this?

Thanks much!