Making another image change while hovering over another

Question

Hello I am making a project, where I have a map and imagebuttons.

Check the image

The maps are stacked on top of eachother and I can get one with Z-Index when I hard code it. But I want the Z-Index to go up when I hover over the corresponding imagebutton. So when I hover over "Workdesks [53]" the map is not "Fixed desks" image but the "Workdesks" image. I know this possible with just CSS and Z-Index But I just dont know how? Can you help me?

HTML;

    <div class="container-fluid">

    <div class="row">

        <div class="col-6">

            <img src="../IMAGE/Plattegronden/Deck A/A Deck Default.png" width="65%" class="hoverimage1">

            <img src="../IMAGE/Plattegronden/Deck A/Workdesks Deck A.png" width="65%" class="hoverimage2">

            <img src="../IMAGE/Plattegronden/Deck A/Fixed desks Deck A.png" width="65%" class="hoverimage3">

        </div>

        <div class="col-4">

        </div>

        <div class="col-2">

            <br />

            <img src="../IMAGE/Buttons/Workdesks [53].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Fixed desks [4].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Huddle [1].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Conference room Large [2].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Conference room Small [1].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Phoneboot [2].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Private office [1].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Medical room [1].png" width="75%">
            <br />
            <br />

            <img src="../IMAGE/Buttons/Luggage room [1].png" width="75%">

        </div>

    </div>

</div>

CSS;

.hoverimage1 {
 margin-top: 30px;
 position: absolute;
 }

.hoverimage2 {
 margin-top: 30px;
 position: absolute;
 }

.hoverimage3 {
 margin-top: 30px;
 position: absolute;
 }