Diğer içeriğin altına yerleştirilen resmin homojen olması

Question

Şu anda geliştirdiğim sayfanın görüntüleri için vurgulu seçiciyi eklemeye çalışıyorum, ancak imleci görüntü üzerine getirdiğimde, vurgulu düzgün çalışıyor ancak konum bir şekilde yanlıştı çünkü ona yakın içeriğin altında görünür. z-endeksi ve pozisyonları kullanmayı denedim. ve bir şey daha, ben de div merkezinden ve köşeden zum yapmak istiyorum. ?

Sadece adresinden demo değiştirin: Sorunuzu doğru anlamış Eğer yardım olabilir daha herhangi bir yardım size, çalışma demo bunu kontrol edin, bu keman

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

kontrol :

#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/

Ben sadece aşağıdaki kodu değiştirmek

Güncelleme: cevabımı güncellendi Bu cevap üzerine yorumlarınızı sonra

canlı demo görmek için bu URL'yi kontrol: https://jsfiddle.net/223ye3na/1/

Güncelleme kod: için

#info{ 
    z-index: -1;  
}