Recardo_Recoly

jsfiddle.net/65Ggv/16

PS: Картинки из гугла по запросу cat icon

//Большая картинка
 <img id="dev" src="https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg"/>
 
 //мелкие картинки
 <img onclick="imgCH(this);" src="https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png">
 
  <img onclick="imgCH(this);" src="http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png">
   <img onclick="imgCH(this);" src="https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png">

function imgCH(imgDIV)
{
   document.getElementById("dev").src = imgDIV.src;
}

-----------------------------------------------------------------------------------
Для background-image:
HTML:

<img id="dev" style="background-size: cover; background-image: url(https://image.freepik.com/free-icon/no-translate-detected_318-52837.jpg);"/>
 
 
 <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://cdn1.iconfinder.com/data/icons/animals-18/154/cat-seat-skin-body-animal-512.png);">
 
  <img onclick="imgCH(this);" style="background-size: cover; background-image: url(http://icons.iconarchive.com/icons/sonya/swarm/256/Cat-icon.png);">
   <img onclick="imgCH(this);" style="background-size: cover; background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/1836-200.png)">

JS

function imgCH(imgDIV)
{
   document.getElementById("dev").style.backgroundImage = imgDIV.style.backgroundImage;
}

Кажись можно как то через position: absolute у желтой полоски.
А зеленой поставить отступ сверху