Question

我试图为当前正在开发的页面的图像添加一些悬停选择器，但是当我将光标指向图像时，悬停工作正常，但位置有点错误，因为它出现在接近它的内容下。我尝试过使用z-index和position。还有一件事，我也想让它从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;    
}

悬停图片位于其他内容下

1 个答案: