2

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

Check the image 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;
 }
Rummy03
  • 31
  • 4
  • Try with the ```hover``` property in CSS. For example: ```img:hover{ background-color:black; }```. In your case you can set the z-index as you like. – marco Mar 17 '22 at 13:26
  • You have a good point but that only works when I hover over the image itself not the corresponding imagebutton on the right – Rummy03 Mar 17 '22 at 13:27
  • 1
    This forum may help: https://stackoverflow.com/questions/11371550/change-hover-css-properties-with-javascript – Bahram Gozalov Mar 17 '22 at 13:28
  • I will check it out but is this also possible with just CSS? I never worked with JavaScript – Rummy03 Mar 17 '22 at 13:29
  • Okay that's too bad than i think it is time for me to learn some JavaScript – Rummy03 Mar 17 '22 at 13:32
  • 1
    https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered try this! But I think that you need to learn Javascript if you want to create a simple website. – marco Mar 17 '22 at 13:34
  • Thanks Marco I know I still need to learn JavaScript but this is a very small school project and I am really new to this stuff so where i can just use HTML and CSS I will use only that ;) – Rummy03 Mar 17 '22 at 13:38
  • 1
    You can do it with CSS alone, but you would need to change your markup quite a bit In CSS you can select a sibling, there for, if your images were siblings of your menu, you could affect them while hovering the menu. – Amaury Hanser Mar 17 '22 at 14:34

0 Answers0