JSFiddle - React, Tailwind, and code Playground

by Eve Weinberg

HTML

<div id='image'></div>
<span class='color' style='background-color: #fe4'></span>
<span class='color' style='background-color: #e14'></span>
<span class='color' style='background-color: #410'></span>
<span class='color' style='background-color: #f0e'></span>
<span class='color' style='background-color: #a31'></span>
<span class='color' style='background-color: #aa4'></span>

CSS

#image {
    background: url(http://www.chismbrothers.com/images/woodfloors.png);
    height: 341px;
    width: 515px;
}

.color {
    width: 50px;
    height: 50px;
    displaye: block;
    float: left;
    margin: 5px 0px;
}

JavaScript

$('.color').hover(function() {
    $('#image').css({
        'background-color': $(this).css('background-color')
    });
}, function() {
    $('#image').css({
        'background-color': 'transparent'
    });
});