Change the dimmed overlay transparency on Sold Products in the Supply Template

Hello,

Is it possible to change the transparency value of the overlay on sold-out products in the Supply template? If so, would you please explain how?

Thanks,Andrew

Can you share site url? @afaris

@tuanphan : www.andrewfaris.com/paintings

@afaris Add to Home > Design > Custom CSS

.no-touch .collection-type-products.view-list.product-list-style-viewbook .sold-out~.masonry-overlay {
   background: rgba(255,255,255,.65);
}

Change .65 to number what you want. It should be 0 to 1, with .65 = 0.65

If it doesn't work, add !important to after, eg: background: rgba(255,255,255,.25) !important;

you can also change to other background color, eg: background: rgba(0,0,0,0.5) !important;

@tuanphan Thank you, that works to control the transparency for the rollover of the Sold products, but I would like to change the transparency value for the up state of the Sold products before you rollover the sold product. I'd like to lessen the transparency of the Sold overlay. I'd like to make the Sold images more visible than they currently are. Is that possible? Thank you.

@afaris try this code

.product-mark.sold-out ~ .masonry-overlay {
   opacity: 0 !important;
   background: #fff !important;
}

Hi @tuanphan - I tried the code. It removes the rollover affect on the product image, but the product image is still dimmed/transparent regardless of rollover/mouse position. I'd like to control the transparency/dimness of the product image without any mouse interaction. I'd like to have the image look more like the unsold products. More saturated. Less dim. Thanks for your help.

@afaris Try this

.sold-out~.masonry-thumbnail {
   opacity: 1;
}

@afaris Try this

.sold-out~.masonry-thumbnail {
   opacity: 1;
}

Contributors do not receive anything from Squarespace when answering the question here. So if the answer is correct, Accept the question and upvote. It will motivate them to continue answering many questions.

Reference (2500 Custom CSS for Squarespace Templates): https://beaverhero.com/squarespace-all-css

@tuanphan Yes! This is it. Thank you!