skalison Posted November 3, 2022 Posted November 3, 2022 On the home page there is a slideshow section and I would like to change the overlay of the images. Some of the images are a bit light, so the white text is blending into them. Is there a way to change the color of the overlay without changing the section background color? Website: https://walpoletowncenter.squarespace.com/ PW: W@P0L3MASS!
Solution jpeter Posted November 4, 2022 Solution Posted November 4, 2022 @skalison The following CSS will target the 2nd slide by using the :nth-child() pseudo class. It the :after pseudo element to add a layer on top of the image and uses the rgba() css function to add background color of black with an opacity of .4 CSS [data-section-id="6351e1b422792e0685dc2531"] .slides .slide:nth-child(2) .slide-media-container:after { background: rgba(0,0,0, .4); content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } Here's a recording changing the opacity value of the background color: background-example.mp4 tuanphan 1 Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment