I'm currently working on enhancing the appearance of my T-Shirt color buttons by adding a heathered image overlay. While some shirts have plain colors, I want to show a pattern overlay on others. How can I include an image for specific buttons that are heathered and adjust the opacity of that image? I've provided my code below as a reference. To get an idea of how I envision it looking, check out this example I found online: Heathered Color Swatch Overlay Example.
Here's the snippet of code I am using:
$colors: (
'color-Navy' #2D2F3C,
'color-Ash' #EEF0F2,
'color-Black' #060606,
'color-White' #F6F6F6,
'color-Charcoal' #59545A,
);
@each $color in $colors {
$colorName: nth($color, 1);
$bgColor: nth($color, 2);
#ProductSelect-option-#{$colorName} + label {
background-color: $bgColor;
color: $bgColor;
width: 50px;
height: 50px;
overflow: hidden;
border-radius: 25px;
margin: 5px;
text-indent: 100%;
white-space: nowrap;
}
#ProductSelect-option-#{$colorName}:checked + label {
border-color: #555;
border-width: 3px;
}
}