图像在 hover+grow 上跳出其绝对位置

Question

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

如何在 hover/mouseover 上将图像保持在正确位置的同时使它们 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>

(运行代码段然后在整页 )

中打开

Answer 1

尝试在 "img" 元素处添加 Class "grow"，而不是 Div 元素

图像在 hover+grow 上跳出其绝对位置

Image jumping out of its absolute position on hover+grow

javascript

html

css

hover

mouseover