JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<div id="mapa-expanduno"></div>
<div id="mapa-expanddos"></div>
<div id="mapa-expandtres"></div>
<div id="mapa-expandcuatro"></div>

CSS

div {
    position: absolute;
}
#mapa-expanduno {
    border: 1px solid blue;
    margin-left: 55px;
    width: 110px;
    height: 125px;
}
#mapa-expanduno:hover {
    width:914px;
    height: 450px;
    margin-left: 0px;
    background: url();
    background-repeat: no-repeat;
}
#mapa-expanddos {
    border: 1px solid red;
    margin-left: 286px;
    width: 110px;
    height: 125px;
}
#mapa-expanddos:hover {
    width:914px;
    height: 450px;
    z-index: -1;
    margin-left: 0px;
    background: url();
    background-repeat: no-repeat;
}
#mapa-expandtres {
    border: 1px solid lightgreen;
    margin-left: 518px;
    width: 110px;
    height: 125px;
}
#mapa-expandtres:hover {
    width:914px;
    height: 450px;
    z-index: -1;
    margin-left: 0px;
    background: url();
    background-repeat: no-repeat;
}
#mapa-expandcuatro {
    border: 1px solid black;
    margin-left: 750px;
    width: 110px;
    height: 125px;
}
#mapa-expandcuatro:hover {
    width:914px;
    height: 450px;
    margin-left: 0px;
    background: url();
    background-repeat: no-repeat;
}