懸停圖片位於其他內容

Question

我想添加一些懸停選擇器爲我目前正在開發的頁面圖像，但因爲我指向圖像上的光標，懸停工作正常，但位置有點不對，因爲它出現在接近它的內容下。我試過使用z-index和職位。還有一件事，我也想讓它從div的中心放大，然後從角落放大。 ？任何幫助，看看這個小提琴

CSS: 
    html, body { 
    margin: 0; 
    height: 100%; 
    } 

.management_wrapper{ 
text-align: center; 
max-width: 80%; ; 
height:auto; 
background-color: white; 
padding-top: 0%; 
padding-bottom: 10%; 
position: relative; 
overflow: auto; 
margin-left: 5%; 
} 

#list_box{ 
margin-top: 1%; 
width: 15%; 
height:20%; 
float:left; 
background-color:beige; 
margin-right:1%; 
position: relative; 
} 
#info{ 
margin-top: 1%; 
width: 15%; 
height:20%; 
float:left; 
color: white; 
margin-right: 1%; 
position: relative; 
} 
#info p{ 
margin-top: 20%; 
color: ; 
} 
.img_size { 
width: 100%; 
height:100%; 
} 
.img_size:hover{ 
width: 300px; 
height:300px; 
position: relative; 
} 

    HTML: 

    <center> 
        <div id="info" style="background-color: #800000 "></div> 
        <div id="info" style="background-color: #280000 ;"> 
         <p> Elena H. Dimailig 
          Managing Director       </p>  
        </div>   
          <div id="list_box">  
          <center> 
          <img id="img_size" src="images/main/3.jpg"> 
          </center> 
          </div> 





       <center>  
        <div id="info" style="background-color: #800000 "> 
         <p> Joel Molina 
          Assistant Account Manager       </p>  
        </div>     
          <div id="list_box">   
          <center> 
          <img class="img_size" src="images/main/molina.jpg"> 
          </center> 
          </div> 
       <div id="info" style="background-color: #180000 "></div> 

https://jsfiddle.net/qz6s2vps/1/

Answer 1

如果我理解正確你的問題，比它可能會幫助你，請檢查一下工作演示：

我只是修改您的演示在：https://jsfiddle.net/223ye3na/

我只是修改下面的代碼：

#img_size { 
    width: 100%; 
    height:100%; 
    -webkit-transition: all 1s ease; /* Safari and Chrome */ 
    -moz-transition: all 1s ease; /* Firefox */ 
    -o-transition: all 1s ease; /* IE 9 */ 
    -ms-transition: all 1s ease; /* Opera */ 
    transition: all 1s ease; 

} 
#img_size:hover{ 
-webkit-transform:scale(1.25); /* Safari and Chrome */ 
    -moz-transform:scale(1.25); /* Firefox */ 
    -ms-transform:scale(1.25); /* IE 9 */ 
    -o-transform:scale(1.25); /* Opera */ 
    transform:scale(1.25); 
} 

更新時間：

這個答案，我更新我的回答您的意見後，檢查這個網址，看到現場演示：https://jsfiddle.net/223ye3na/1/

更新代碼：

#info{ 
    z-index: -1;  
}