JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<section id="hallo">
    <div id="bg"></div>
    <div id="t1"></div>
</section>

CSS

body {
    margin: 0px;
}

#hallo {
    width: 960px;
    height: 600px;
    position: relative;
    margin: auto;
    border: solid 1px yellow;
}
#bg {
    width: 960px;
    height: 600px;
    position: absolute;
    background-image:url(torres.jpg);
    background-size: 960px 600px;
}

#t1 {
    width: 100px;
    height: 100px;
    position: absolute; 
    background-size: 100px 100px;
    border: solid 1px white;
}

#t1  {
    top: 100px;
    left: 600px;
    background-image:url(torres1.jpg);
}

#t1:hover ~ #bg {
    position: absolute;
    background-image:url(torres1.jpg);
    background-size: 960px 600px;
}