Im trying to have my images change once they've been hover over, but for some reason when I hover over one the other changes

Question

I'm trying to implement a css effect where once the mouse hovers over an image, another image will appear in its place.

An example of this effect:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
    .card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }
</style>
</head>
<body>
    <div class="card">
        <img src="https://lh3.googleusercontent.com/proxy/yPBxt1JeUGqXWcCd9IRpOLIYSKWFLteV_m-ATsbTdYmpWM2iUIc36U6LfRP1tL31iAgC4YrwyUkqGwwJv0Jjy6lHPFC3y0Y" alt="Card Back">
        <img src="https://i.pinimg.com/originals/23/48/8a/23488aa42a19433d34b72a5ee4ae5f14.jpg" class="img-top" alt="Card Front">
    </div>
</body>
</html>

And the following is my own code:

<!DOCTYPE html>
<html>

<head>
    <style>
        .mid-one-container {
            position: relative;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-items: baseline;
            align-content: center;
            display: inline-block;
        }

        .mid-one-items {
            order: 3;
            flex-basis: 0;

        }

        .mid-one-items img {
            width: 300px;
        }

        .mid-one-items .img-top {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 50;
        }


        .mid-one-items:hover .img-top {
            display: inline;
        }
    </style>

</head>

<body>

    <div class="mid-one-container">
        <div class="mid-one-items">
            <img src="https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/egamzcy0qviwbrbhbfp3/fc-barcelona-2019-20-vapor-match-home-football-shirt-d16q4Q.jpg"
                alt="front">
            <img src="https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5,q_80/dzsv4wxmgirdghtx8nln/fc-barcelona-2019-20-vapor-match-home-football-shirt-d16q4Q.jpg"
                class="img-top" alt="back">

            <img src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/m65penejikj8c00svcmo/stephen-curry-earned-city-edition-swingman-golden-state-warriors-mens-nba-connected-jersey-4Vr7FK.jpg"
                alt="front">
            <img src="https://c.static-nike.com/a/images/t_PDP_1280_v1/f_auto/fm4aihaj6diuyf1htuot/stephen-curry-earned-city-edition-swingman-golden-state-warriors-mens-nba-connected-jersey-4Vr7FK.jpg"
                class="img-top" alt="back">
        </div>



    </div>


</body>

When I try to implement this feature in my flex box container, I get a couple unintended errors:

When I hover over the image on the left (blue and red jersey), the image transforms to the incorrect image (i.e. the image of the man in the yellow jersey)
when I hover over the man in the yellow jersey, it changes the image of the man in the blue and red jersey.

I suspect it has something to do with these two styles:

.mid-one-items .img-top {
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 50;
    }


    .mid-one-items:hover .img-top {
        display: inline;
    }

Any help with some tips on having the correct image appear on hover as well as keeping the images in the same row would be greatly appreciated.

score 0 · Answer 1 · answered Jul 11 '20 at 03:00

mid-one-items .img-top {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 50;
}

Here you are setting the position for EVERY item of class .img-top to be fixed at 0px from the left, this means both images that appear on hover are positioned there, the golden state T-shirt is after the barça one, that's why we only see that one, but actually both are there it's just the golden state one is on top.

try commenting position: absolute; to see what I mean, you'll see both images from the class .img-top appearing, you need to position them correctly that's all.

You could do this in different ways, a simple but probably not the best way would be to make different css classes for each picture where you set diferent values for the left position, right now both pictures will appear when you hover (because they are the same class) but if you have a different class for each one, only one will appear each time you hover a different image.

Hi Hugo, thanks for the response. My follow up questions is this if you dont mind: Im taking the approach of creating a class for each image. How can I ensure that left value will be accurately placed above the second image? Would trial and error be the approach? Seems there should be a better way — sal mourad, Jul 13 '20 at 00:04
This answer might help you: https://stackoverflow.com/a/1997397/10438834 also you could inherit the position from a parent class so both child and parent have the same position. for example in the parent class you could say left : 0; and the in the child class you can just say left : inherit; and it will set left to be the one in the parent class — Hugo, Jul 13 '20 at 15:58

Im trying to have my images change once they've been hover over, but for some reason when I hover over one the other changes

1 Answers1