Наведите курсор на изображения с CSS и HTML

Question

У меня CSS, как показано ниже. Наведение отлично работает с двумя изображениями, однако третье не будет отображаться внутри двух других изображений. Третье изображение отображается под первым изображением. Я пытаюсь одновременно навести 3 изображения.

CSS

.card {
    width: 150px;
    height: 150px;
    position: relative;
    display: inline-block;
}

.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    width:200px;
 }

 .card:hover .img-top {
    display: inline;
 }

 .card:hover2 .img-top2 {
    display: inline;
 }

HTML

<div class="card">
     <img style="width: 200px; display: inline;" src="../media2/white" border="1">
     <img class="img-top" alt="Huifkar" src="../media2/red " border="1">
     <img class="img-top2" alt="baai" src="../media2/heerenbaai_paars.jpg" border="1">
</div>

Answer 1

Ваш вопрос четко не сформулирован.

Однако, сделайте z-index изображения 3 выше, и он должен работать правильно.

    .card:hover2 .img-top2 {

        display: inline;
         z-index: 100;

    }