Is there a way to get an image overlay over a selected radio button on Shopify (Liquid)? - shopify

Question

A client wants me to make an image overlay over the selected radio button, so when Size Small, for example, is selected, instead of a highlighted button, and image will show up in its place. See image below. Let me know!! been trying to figure this out for like 5 days!! Thanks.
enter image description here

Answer 1

This looks like something that would just need a little bit of clever HTML/CSS structure.
For example:
.product-option{
position: relative;
display: inline-block;
}
.product-option__input{
display: none;
}
.product-option__label{
padding: 0.25em 1.5em;
display: inline-block;
cursor: pointer;
border: 1px solid black;
border-radius: 4px;
}
.product-option__input:checked ~ .product-option__label{
/* Some nice styles to highlight the selected option? */
background-image: url('/some-nice-background.png');
color: transparent; /* If you want to make the text go away for some reason? */
border-color: darkgreen;
/* Etc. */
}
.product-option__input:checked ~ .product-option__label:after{
/* Maybe we want something that we can position independently? */
position: absolute;
content: '';
border: 2px solid green;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(-0.125turn, green, lightgreen);
}
<!--
In Liquid, this HTML would be generated with a forloop similar to the following:
{% for option in product.options_with_values %}
<div class="product-option-wrapper">
{% for value in option.values %}
{% assign unique_option_id = 'option_' | append: product.id | append: '-' | append: option.position | append: '-' | append: forloop.index %}
<div class="product-option>
<input class="product-option__input" id="{{ unique_option_id }}" name="{{ option.name }}" value="{{ value | escape }}" {% if value == option.selectd_value %}checked{% endif %} />
<label class="product-option__label" for="{{ unique_option_id }}">
<span class="product-option__text">{{ value }}</span>
</label>
</div>
{% endfor %}
</div>
{% endfor %}
-->
<div class="product-option">
<input class="product-option__input" id="option1-small" type="radio" name="option1" value="small"/>
<label class="product-option__label" for="option1-small">
<span class="product-option__text">Small</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-med" type="radio" name="option1" value="med"/>
<label class="product-option__label" for="option1-med">
<span class="product-option__text">Med</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-lg" type="radio" name="option1" value="lg"/>
<label class="product-option__label" for="option1-lg">
<span class="product-option__text">Large</span>
</label>
</div>
<!-- etc -->
This should hopefully be enough to get you started and let your imagination run wild with all the cool things you can do with just some simple HTML/CSS running together :)