How to change the color of a translucent box on a website slider?

Store Design
1

Hello,

On the homepage of my website I have a slider with two different images. On the first image I have a pink translucent box. I would like to add one to the second image as well, however I would like for it to be color #BF1323. How do I keep the first one pink and make the second one red? My website is projects817.com

Screenshot 2022-11-10 at 19.45.57.png
Screenshot 2022-11-10 at 19.45.57.png1239×1167 535 KB

Thank you in advance,

1 Like
2

@Only1mrsfragili

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/styles.css ->paste below code at the bottom of the file.
.slide-2 .caption-content {
    background: #bf1323;
}
1 Like
3

Hi, that only partial worked. It got the background red, but it’s solid and not translucent like the first.

Screenshot 2022-11-11 at 06.54.20.png
Screenshot 2022-11-11 at 06.54.20.png2880×1800 654 KB

Screenshot 2022-11-11 at 06.54.24.png
Screenshot 2022-11-11 at 06.54.24.png2880×1800 600 KB

4

I was able to solve it I needed to use the rgba background color and it worked.

.slide-2 .caption-content {
background: rgba(191, 19, 35, 0.5)
}

1 Like
5

@Only1mrsfragili

oh that would be great if like that please add like and accept some one use in future

1 Like