My images overlap each other and I don't know why

Question

I am trying to create a gallery on my website and I have them all set to increase in size when hovered over. The only issue is even when they increase in size, the images beside them show on top of the increased image.

Here is the HTML:

<div class="flex-con-col" style="align-content: space-around;">
    <div class="flex-con-row" style="align-content: space-around">
        <div>
            <img src="img/socialBar.jpg" alt="" onmouseover="bigImg('galImg1')" onmouseout="normalImg('galImg1')" id="galImg1" style="height: 200px;"/>
        </div>
        <div style="width: 20px;"></div>
        <div>
            <img src="img/outside.jpg" alt="" onmouseover="bigImg('galImg2')" onmouseout="normalImg('galImg2')" id="galImg2" style="height: 200px;"/>
        </div>
        <div style="width: 20px;"></div>
        <div>
            <img src="img/socialBar2.jpg" alt="" onmouseover="bigImg('galImg3')" onmouseout="normalImg('galImg3')" id="galImg3" style="height: 200px;"/>
        </div>
        <div style="width: 20px;"></div>
        <div>
            <img src="img/socialBar.jpg" alt="" onmouseover="bigImg('galImg4')" onmouseout="normalImg('galImg4')" id="galImg4" style="height: 200px;"/>
        </div>
    </div>
</div>

Here is my script:

<script>
    function bigImg(id) {
        img = document.getElementById(id);
        img.style.transform = "scale(2)";
        img.style.transition = "transform 0.25s ease";
        img.style.zIndex = "99";
    }
    function normalImg(id) {
        img = document.getElementById(id);
        img.style.transform = "scale(1)";
        img.style.transition = "transform 0.25s ease";
        img.style.zIndex = "1";
    }
</script>

Here is my CSS:

.flex-con-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.flex-con-col {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

I tried to increase and decrease the z-index, thinking that would help. But no such luck.

**** EDIT **** I solved the issue. Leaving the question up here for future people to view. In the javascript, I had to set the div to change z-index, not the picture itself. Solution:

<script>
    function bigImg(id) {
        img = document.getElementById(id);
        par = img.parentNode;
        img.style.transform = "scale(2)";
        img.style.transition = "transform 0.25s ease";
        par.style.zIndex = 99;
    }
    function normalImg(id) {
        img = document.getElementById(id);
        par = img.parentNode;
        img.style.transform = "scale(1)";
        img.style.transition = "transform 0.25s ease";
        par.style.zIndex = 1;
    }
</script>

Don’t you need to set position to `relative` for `z-index` to work? — RatajS, Dec 10 '21 at 15:37

score 0 · Accepted Answer · answered Dec 10 '21 at 15:37

0

In order to keep them from overlapping try making position set to relative, I can't see your CSS here but my guess is that you probably have it set to position absolute, which means that the image (or any other element with the styling) wont move, even if there is another div next to it. Setting it to position: relative; could fix it. You don't have any classes set to your code so what you could do is just add style="position: relative;" in the image. However based off your could I would make it so the DIV's the images are held in resize, and add the position relative to that, then just make the images have width:100%; and height:100%.

answered Dec 10 '21 at 15:37

Tyler Spruill

127
6

1

I think `z-index` works for anything but `static` position. – RatajS Dec 10 '21 at 15:38
I updated my question so you could see the CSS> I am working with flexboxes, so no static positions. – OvenActive Dec 10 '21 at 15:42
@OvenActive — `position: static` is the default and is changed only if you explicitly change it. Putting an element in a flex layout doesn't change its `position` value. – Quentin Dec 10 '21 at 15:58

My images overlap each other and I don't know why

1 Answers1