将鼠标悬停在其他内容下方的图片

Question

我正在尝试为我当前正在开发的页面的图像添加一些悬停选择器，但是当我将光标指向图像时，悬停工作正常但位置不对，因为它出现在接近它的内容。我试过使用 z-index 和位置。还有一件事，我还希望它从 div 的中心和角落缩放。有帮助吗？看看这个 fiddle

  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;    
}

将鼠标悬停在其他内容下方的图片

Hover picture positioned under other content

html

css

hover