JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div class="outer" id="mapa-expanduno"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expanddos"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandtres"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandcuatro"></div>
<div class="inner"></div>
<div style="position: absolute; left: -999em;">
    <img src="http://lorempixel.com/1200/900/nature/3" />
    <img src="http://lorempixel.com/1200/900/nature/4" />
    <img src="http://lorempixel.com/1200/900/nature/1" />
    <img src="http://lorempixel.com/1200/900/nature/2" />
</div>

CSS

div {
    position: absolute;
}
.outer {
    cursor: pointer;
    width: 110px;
    height: 125px;
}
.inner {
    position: fixed;
    top: 0;
    left: 0;
    width:914px;
    height: 450px;
    z-index: -1;
    display: none;
}
#mapa-expanduno {
    border: 1px solid blue;
    margin-left: 10%;
}
#mapa-expanduno:hover + .inner {
    display: block;
    background: url(http://lorempixel.com/1200/900/nature/4);
    background-repeat: no-repeat;
}
#mapa-expanddos {
    border: 1px solid red;
    margin-left: 30%;
}
#mapa-expanddos:hover + .inner {
    display: block;
    background: url(http://lorempixel.com/1200/900/nature/3);
    background-repeat: no-repeat;
}
#mapa-expandtres {
    border: 1px solid lightgreen;
    margin-left: 50%;
}
#mapa-expandtres:hover + .inner {
    display: block;
    background: url(http://lorempixel.com/1200/900/nature/2);
    background-repeat: no-repeat;
}
#mapa-expandcuatro {
    border: 1px solid black;
    margin-left: 70%;
}
#mapa-expandcuatro:hover + .inner {
    display: block;
    background: url(http://lorempixel.com/1200/900/nature/1);
    background-repeat: no-repeat;
}