Custom CSS Hero Image Caption Card Transparency

[kankrum]

 

The above image from my store. I would like to know the Custom CSS code to increase the transparency of the card behind "Mix And Match" text. I'd like it to be 10-15% more transparent. I am using ShowTime theme. Thanks!

[Moeed · Accepted solution]

Hey @kankrum 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.\#hero.gap-h4.\@box\:d4.shadow-3.\@align\:center.\@size\:md {
    --bg-color: rgb(255 255 255 / 38%) !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Moeed]

Hey @kankrum 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[kankrum]

Thanks for your reply. https://www.freshfindsmarket.com/pages/build-your-own-bundles. no pw. 

[Moeed · Accepted solution]

Hey @kankrum 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.\#hero.gap-h4.\@box\:d4.shadow-3.\@align\:center.\@size\:md {
    --bg-color: rgb(255 255 255 / 38%) !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[comercioservice · Accepted solution]

@kankrum 

hi Hope you are well,

I’ve taken a look at what you need—just a little CSS magic, and everything will be fixed! Follow my steps, and you'll have it sorted in no time!

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the code in the end

<style>
.\#hero {
    --bg-color: rgb(255 255 255 / 38%) !important;
}
</style>
​

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you