Adding a gradient overlay to media grid images

English Shopify Shopify Design
1

I am trying to add a CSS gradient overlay to the images in the media grid section of the Enterprise theme. Gradient should be behind the text.

Would be even better if this could be changed in the hover state.

anteck.com.au

gradient Anteck.jpg
gradient Anteck.jpg1860×621 197 KB

Thanks in advance!

N

2

Add this CSS in the “Custom CSS” area of in the settings of that section (adjust the gradient as needed):

.media--has-overlay::after {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(255, 0, 0, 0.3));
}

/* For Hover */
.media--has-overlay::after {
  transition: opacity 0.3s ease;
  opacity: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(255, 0, 0, 0.3));
}

.gallery-block__image:hover .media--has-overlay::after {
  opacity: 1;
}

DrewOswald_1-1747975365439.png
DrewOswald_1-1747975365439.png307×353 10.8 KB

DrewOswald_0-1747975241655.png
DrewOswald_0-1747975241655.png1058×667 705 KB

3

Hi @Nick_S2

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.media--has-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(260, 302, 1, 0.6), rgba(220, 220, 440, 0)) !important;
    z-index: 1;
    transition: background 0.3s ease;
}
.block-media:hover .media--has-overlay::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)) !important;
}
.gallery-block__image-text {
    position: relative !important;
    z-index: 2 !important;
}

Result:

websensepro_0-1747988027159.png
websensepro_0-1747988027159.png1366×644 802 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! :rocket: (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

4

Hi @DrewOswald

Worked perfectly! Thanks for your help.

N