JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Thumbnail switching. Choose thumbnail: <select class='select_thumbnail'>
    <option value='right'>Right side</option>
    <option value='left'>Left side</option>
    <option value='face'>Face</option>
    <option value='belly'>Back/Belly</option>
    <option value='full2'>Full Tiny</option>
    <option value='full1'>Full Small</option>
    <option value='full'>Full</option>
</select> 

Background colour: <input type="color" class="select_bg" value="#ffffff">

<p>

<div class='thumbnail_div'>
    <div class='thumbnail_img'>
        <img src='http://mythstable.epizy.com/horsemarks/images/1.png' class='thumbnail_right'>
    </div>
    <br><a href=''><b>horse name</b></a>
</div>

<div class='thumbnail_div'>
    <div class='thumbnail_img'>
        <img src='http://mythstable.epizy.com/horsemarks/images/2.png' class='thumbnail_right'>=
    </div>
    <br><a href=''><b>horse name</b></a>
</div>

<div class='thumbnail_div'>
    <div class='thumbnail_img'>
        <img src='http://mythstable.epizy.com/horsemarks/images/3.png' class='thumbnail_right'>
    </div>
    <br><a href=''><b>horse name</b></a>
</div>

<div class='thumbnail_div'>
    <div class='thumbnail_img'>
        <img src='http://mythstable.epizy.com/horsemarks/images/4.png' class='thumbnail_right'>
    </div>
    <br><a href=''><b>horse name</b></a>
</div>

<div class='thumbnail_div'>
    <div class='thumbnail_img'>
        <img src='http://mythstable.epizy.com/horsemarks/images/5.png' class='thumbnail_right'>=
    </div>
    <br><a href=''><b>horse name</b></a>
</div>


</p>

Choose thumbnail: <select class='select_thumbnail'>
    <option value='right'>Right side</option>
    <option value='left'>Left side</option>
    <option value='face'>Face</option>
    <option value='belly'>Back/Belly</option>
    <option value='full2'>Full Tiny</option>
    <option value='full1'>Full Small</option>
    <option value='full'>Full</option>
</select> Background colour: <input type="color" class="select_bg" value="#ffffff">

CSS

/* Contains the full horse template image. */
.thumbnail_div {
  display: inline-block;
  border: 1px solid silver;
  margin: 5px;
  padding: 5px;
  text-align: center;
}

.thumbnail_img {
    width: 170px;
    height: 150px;
    position: relative;
    border: 0px solid green;
    overflow: hidden;
}

/* Position image to show horse's left side. */
.thumbnail_left {
  position: absolute;
  left: -190px;
}

/* Position image to show horse's right side. */
.thumbnail_right {
  position: absolute;
  left: 0px;
}

/* Position image to show horse's face details. */
.thumbnail_face {
  position: absolute;
  left: -95px;
}

/* Position image to show horse's back and belly. */
.thumbnail_belly {
  position: absolute;
  left: -310px;
}

.thumbnail_full, .thumbnail_full1, .thumbnail_full2 {
    width: 100%;
    height: auto;
}

JavaScript

let currentThumb = 'right';
let currentBg = '#fff';

$('.select_thumbnail').change(function(){

    let newThumb = $(this).val();
    let width = 170;
    let height = 150;
    
    if(newThumb == 'full2'){
        width = 240;
        height = 75;
    }else if(newThumb == 'full1'){
        width = 320;
        height = 100;
    }else if(newThumb == 'full'){
        width = 480;
        height = 150;
    }
    
    $('.thumbnail_img').css({"width": width + "px", "height": height + "px"});
    
    $('.thumbnail_img img').removeClass("thumbnail_" + currentThumb).addClass("thumbnail_" + newThumb);
    
    currentThumb = newThumb;
    $(".select_thumbnail").val(currentThumb);
});

$(".select_bg").change(function(){
    currentBg = $(this).val();
    $(".thumbnail_img").css("background-color", currentBg);
    $(".select_bg").val(currentBg);
});