Hover picture positioned under other content

Question

i'm trying to add some hover selector for the images of the page i'm currently developing, but as i point the cursor on the image, hover works fine but the position was somehow wrong because it appears under the content close to it. i've tried using z-index and positions. and one more thing, i also want it to zoom from the center of the div, and from the corner . any help?check out this 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

If I correctly understood your question, than it might be help you, please check it out working demo:

I just modify your demo at: https://jsfiddle.net/223ye3na/

I just modify your below code:

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

Updated:

After your comments on this answer I was updated my answer check this URL to see live demo: https://jsfiddle.net/223ye3na/1/

Updated code:

#info{
  z-index: -1;    
}