图像在悬停+增长时跳出了其绝对位置

Question

我有多个使用CSS position: absolute属性定位的图像。我希望他们将鼠标悬停在grow上。但是，当我尝试将transform: scale属性应用于图像时，图像会反复跳到所有图像下方，然后在其中生长，而不是在其定义的位置生长。

如何在将鼠标悬停/鼠标悬停在grow上的同时保持图像在正确的位置？

我为弗兰肯斯坦密码预先表示歉意。

JS，CSS，HTML

    function changeContent(description) {
        console.log(description);
        var MyDesc = document.getElementById(description);
        document.getElementById('content').innerHTML = MyDesc.value;
    }

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

img, span{
   display:table-cell;
}

.grow {
    transition: all .2s ease-in-out;
    }
    
.grow:hover {
    transform: scale(1.1);
    }

#main {
  width: 100%;
}
#photo {
  display:flex;
}

#photo > #photo-center {
  width:100%;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: 0px;
}

/* Diagram */
#large{
    width:100%;
  }

/* Server Ops 2 - Bob */
#ops2{
    width:17%;
    position:absolute;
    left:44%;
    right:0px;
  top:0%;
  z-index:1;
    }
 
/* Server Ops 1 - Alice */
#ops1{
    width:17%;
    position:absolute;
    left:85%;
    right:0px;
  top:0%;
  z-index:1;
    }
    
    /* QA Black Box - Steve */
#qablack{
    width:10%;
    position:absolute;
    left:60%;
    right:0px;
  top:37%;
  z-index:1;
    }
    
    /* QA Load Testing - Jerry */
#qaload{
    width:17%;
    position:absolute;
    left:63%;
    right:0px;
  top:68%;
  z-index:1;
    }
    
    /* QA Software Engineer - Alex */
#qasoft{
    width:17%;
    position:absolute;
    left:73%;
    right:0px;
  top:38%;
  z-index:1;
    }
    
    /* Manager 2 - Peter */
#mang2{
    width:15%;
    position:absolute;
    left:22%;
    right:0px;
  top:-6%;
  z-index:1;
    }
    
    /* Manager 1 - Craig */
#mang1{
    width:13%;
    position:absolute;
    left:6%;
    right:0px;
  top:-4%;
  z-index:1;
    }
    
    /* Software Engineer 1 - Bill */
#soft1{
    width:15%;
    position:absolute;
    left:0%;
  top:50%;
  z-index:1;
    }
    
    /* Software Engineer 2 - Jared */
#soft2{
    width:9%;
    position:absolute;
    left:3%;
    right:0px;
  top:23%;
  z-index:1;
    }

<strong><div style="font-size:20px" class="container" id="content">Hover over a character to discover their Workflow Woes!</div></strong>

<div id="main">
        <div id="photo">
           <div id="photo-center">   
             <img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:traditional3.jpg" id="large">
             <div class="grow">
               <a onmouseover="changeContent('desc1')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops2.png" id="ops2"></a>
                 <input type="hidden" id="desc1" value="apples are delicious">
               </div>
               <div class="grow">
                <a onmouseover="changeContent('desc2')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops1.jpg" id="ops1"></a>
                  <input type="hidden" id="desc2" value="Oranges are healthy">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc3')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer1.png" id="soft1"></a>
                <input type="hidden" id="desc3" value="Candy is tasty!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc4')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer2.png" id="soft2"></a>
                <input type="hidden" id="desc4" value="hhhh!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc5')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_black_box.png" id="qablack"></a>
                <input type="hidden" id="desc5" value="aaaa!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc6')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_load.png" id="qaload"></a>
                <input type="hidden" id="desc6" value="pppp!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc7')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_soft_engineer.png" id="qasoft"></a>
                <input type="hidden" id="desc7" value="lollll!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc8')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager1.png" id="mang1"></a>
                <input type="hidden" id="desc8" value="bowowow!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc9')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager2.png" id="mang2"></a>
                <input type="hidden" id="desc9" value="meowww!">
                </div>
          </div>
        </div> 
      </div>

（Run代码段，然后在Full Page）

中打开

Answer 1

尝试在“ img”元素而不是Div元素上添加类“ grow”