Adding a gradient overlay to media grid images

[Nick_S2]

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 

Thanks in advance!

N

[DrewOswald · Accepted solution]

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;
}

[Nick_S2]

Hi @DrewOswald 

Worked perfectly! Thanks for your help. 

N

[websensepro]

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:

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! 🚀 (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!