z-index of absolute positioned divs

I am trying to get a photo to expand when you hover over it. However I am having trouble getting it to expand on top of what is already there. Currently it expands under it.

My HTML and my css are:

.userCard {width:360px;height:180px;border:1px solid black;float:left;margin:10px;position:relative;font-size:12px;background-image: url('paper.jpg')}
    
    div:first-child {
      opacity: .99; 
    }
    
    .zoom:hover {
        transform: scale(3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    	transform-origin: top left;
    }

 <div class="userCard">
       <table class="myTable" width="100%" cellspacing="0" height="100%">
          <tr valign="top">
             <td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
                <div class="zoom" style="background-color:white;">                      <h1>
                    PHOTO
                    </h1>
                </div> 
             </td>
             <td width="75%">
                <b>A N Employee
                
                <div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
                   <table border="1" cellspacing="0" width="100%" style="font-size:14px;">
                      <tr>
                         <td style="padding:3px;line-height:10px">AM</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
                         <td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
                         <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
                         </tr>
                      <tr>
                         <td style="padding:3px;line-height:10px">PM</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                         <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td>
                      </tr>
                   </table>
                </div>
                
             </td>
          </tr>
       </table>
    </div>

I found an article here where I picked up the tip about the first-child CSS but that hasn't done the trick.

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

I've made a fiddle here if anyone can help - thank you!

https://jsfiddle.net/d76xkyou/1/

Solution

You just need to add a position and a z-indexto the .zoom

see below

.userCard {
  width: 360px;
  height: 180px;
  border: 1px solid black;
  float: left;
  margin: 10px;
  position: relative;
  font-size: 12px;
  background-image: url('paper.jpg')
}

div:first-child {
  opacity: .99;
}

.zoom:hover {
  transform: scale(3);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  transform-origin: top left;
  z-index: 9999;
  position: relative;
}

<div class="userCard">

  <table class="myTable" width="100%" cellspacing="0" height="100%">
    <tr valign="top">
      <td width="25%" style="padding:0px;" bgcolor="#E6E6E6">
        <div class="zoom" style="background-color:white;">
          <h1>
            PHOTO
          </h1>
        </div>

      </td>
      <td width="75%">
        <b>A N Employee
            
            <div style="position:absolute;bottom:15;z-index:1000;right:15;font-family:arial;">
               <table border="1" cellspacing="0" width="100%" style="font-size:14px;">
                  <tr>
                     <td style="padding:3px;line-height:10px">AM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >12/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >13/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >14/11</td>
                     <td style="padding:3px;line-height:10px" bgcolor="" class="" >15/11</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray" class="" >16/11</td>
                  <tr>
                     <td style="padding:3px;line-height:10px">PM</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px" bgcolor="">&nbsp;</td>
                     <td style="padding:3px;line-height:10px; background: repeating-linear-gradient(45deg, #c6cef4, #c6cef4 10px, #d7dbef 10px, #d7dbef 20px);" bgcolor="gray">&nbsp;</td>
                  </tr>
               </table>
            </div>
            
         </td>
      </tr>
   </table>
</div>