SALE text over Swatch in Single Product page

Hi,

I’d like to know how to / if possible, to add a “SALE” text over the swatch variation image on the single product page.

Example: https://shop.scanimals.net/index.php/product/fortune-dragon/
Price shows as $38 with strike through and $31.50 as current price.
This discount / sale price only exists on one variation as we have a lot of stock of it.
User has to click through every swatch to find which one is on sale.
We’d like to have some “SALE” text over the swatch so user can find the item on sale quicker.
It’s possible multiple variations may have SALE

I tried using ChatGPT to build something and it suggested the following which didnt work.

## CODE SNIPPET ##
add_action('woocommerce_before_single_product_summary', 'add_sale_overlay_to_variation_images', 5);
function add_sale_overlay_to_variation_images() {
    // Check if the current user is an administrator
    if ( current_user_can('administrator') ) {
        global $product;
        if ( $product->is_on_sale() ) {
            echo '<div class="sale-overlay">SALE</div>';
        }
    }
}

## CSS ##
/* Sale overlay styling */
.sale-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: red;
    color: white;
    font-weight: bold;
    padding: 5px 10px;
    z-index: 10;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 3px;
}

.wd-swatch .sale-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 5px;
    font-weight: bold;
}

Any help would be greatly appreciated.