How do I make the collection image transparent?

Store Design
,

Topic summary

A user working with Shopify’s Trade theme wants to create a lightened, transparent overlay effect on collection images (similar to placing vellum paper over a picture) instead of the default darkening effect, to make black text readable.

Two solutions were provided:

  1. Background overlay approach: Replace the existing filter: brightness(.5) code in base.css with code that removes the filter and adds a semi-transparent background layer behind the text. The background color and opacity can be customized.

  2. CSS filter method: Adjust the brightness/contrast values directly using filter: contrast(0.3) brightness(1.5) in the Custom CSS section. Alternatively, create an actual overlay using a pseudo-element with rgba(255,255,255, 0.5) for a white transparent layer.

Resolution: The user initially experienced issues when adding code directly to the stylesheet (it affected product images unintentionally), but successfully implemented the first filter-based solution. A recommendation was made to use the theme’s “Custom CSS” setting instead of editing code files directly, as it applies styles only to specific sections and avoids conflicts with other page elements.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I have successfully added a text overlay to my collections, but I only found in the code to make the image itself darker to read the text. What I am looking for is the complete opposite, almost like adding a white transparent layer on top of the original opacity (the same look you would get if you put a piece of vellum paper on top of a picture, if that makes sense.) If I can fix the code for this, then I will make the text black, which I know how to do. Any help would be great. For reference, I am using Trade theme.

My website is littlewayboutique.com

2

I check you are using this property to make the image Darker.

.collection-list .card__media img {
    filter: brightness(.5);
}

But instead of this you want to add a background behind the text then you have to paste this code in the end of base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

.collection-list .card__media img {
    filter: brightness(1) !important;
}
.collection-list-wrapper slider-component .card--media .card__content{
    height: 100% !important;
    background: rgb(0 0 0 / 19%) !important;
 }

You can change the color background which you want.

If you need more help let me know.

Thanks

3

Theme has this rule in assets/base.css:

.collection-list .card__media img {
	filter: brightness(0.50);
}

You can play with the filter value – in Customizer add this code into this sections setting “Custom CSS”

.collection-list .card__media img {
	filter: contrast(0.3) brightness(1.5);
}

before → after:

Screenshot 2025-04-11 at 1.49.56 AM.png
Screenshot 2025-04-11 at 1.49.56 AM.png626Ă—723 394 KB

Screenshot 2025-04-11 at 1.50.23 AM.png
Screenshot 2025-04-11 at 1.50.23 AM.png626Ă—723 378 KB

Alternatively, to implement actual overlay, can use this code. More complex, but looks very similar:

.collection-list .card__media img {
  filter: none;
}

.card__inner.ratio:before {
  width: 100%;
  z-index: 2;
  background: rgba( 255,255,255, 0.5);
}

Screenshot 2025-04-11 at 1.59.11 AM.png
Screenshot 2025-04-11 at 1.59.11 AM.png626Ă—723 391 KB

1 Like
4

I tried adding the code that you last posted at the bottom, but i changed the product images as well where half the image is regular and half as overlay

5

I went ahead and removed the bottom code and changed the code in your first suggestion and it worked.

6

If you’re adding CSS via editing code rather then using “Custom CSS” setting, it may affect other elements on the page.

“Custom CSS” adds extra selector to

a) apply styles to this section only and avoid collisions like you’ve just had;

b) raise their priority.

Anyways, first code was ok, looked very similar to the second.