將圖片懸停在其他內容下方

Question

我正在嘗試為我當前正在開發的頁面的圖像添加一些懸停選擇器，但是當我將光標指向圖像時，懸停效果很好，但是由於某種原因它的位置出現了錯誤，因為它出現在靠近它的內容下。 我試過使用z-index和positions。 還有一件事，我也希望它從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);
}

更新：

在您對此答案發表評論后，我的答案已更新，請檢查以下URL以觀看實時演示： https : //jsfiddle.net/223ye3na/1/

更新的代碼：

#info{
  z-index: -1;    
}