Сетка изображения с эффектом наведения

Question

Я сделал сетку изображений в HTML с таблицей.

Я хочу использовать только CSS

вот HTML

<table id="mainwrapper" cellspacing="0" cellpadding="0">
 <tr>
  <td colspan="2"><a href="tuin.html"><img src="images/biggerthumb/tuin12.png"/> <span><img width="50px" src="images/biggerthumb/tuin12.png"/> </span></a></td>
  <td><a href="rivier.html"><img width="50px" src="images/biggerthumb/rivier4.png" /> </a></td>
   <td colspan="2" rowspan="2"><a href="living.html"><img width="50px" 
    src="images/biggerthumb/living7.png" /><span><img width="50px" 
     src="images/biggerthumb/living7.png" /></span></a></td>
       <td rowspan="2"><a href="rivier.html"><img width="50px" 
        src="images/biggerthumb/rivier6.png" /><span><img width="50px" 
          src="images/biggerthumb/rivier6.png" /></span> </a></td></tr>
         <tr><td><a href="keuken.html"><img width="50px" 
       src="images/biggerthumb/keuken1.png" /><span><img width="50px" 
        src="images/biggerthumb/keuken1.png" /></span> </a></td>
         <td rowspan="2"><a href="living.html"><img width="50px" 
      src="images/biggerthumb/living5.png" /><span><img width="50px" 
         src="images/biggerthumb/living5.png" /></span> </a></td>
         <td><a href="slaapkamers.html"><img width="50px" 
      src="images/biggerthumb/kamer1.png" /><span><img width="50px" 
      src="images/biggerthumb/kamer1.png" /></span> </a></td></tr></table>

Но теперь я хочу увеличить изображение в ячейках таблицы, когда кто-то наводит на него курсор. Но изображение должно быть перед другими изображениями.

здесь Я пробовал с

td > a > img:hover {

        vertical-align: top;
        z-index: 100;
        position: absolute;
               }

но это не сработало. Изображения необходимо увеличить в том же месте, что и исходное фиксированное изображение.

Большое спасибо!

Answer 1

Использование transform: https://www.w3schools.com/howto/howto_css_zoom_hover.asp

td > a > img:hover {
 transform: scale(1.5);
}
               
td > a > img{
transition: transform .2s;
}

<table id="mainwrapper" cellspacing="0" cellpadding="0">
<tr>
 <td>
    <a href="slaapkamers.html">
      <img width="50px"src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
    <span><img width="50px" 
      src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      </span> 
    </a>
  </td>
    <td>
    <a href="slaapkamers.html">
      <img width="50px"src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
    <span><img width="50px" 
      src="https://material.angular.io/assets/img/examples/shiba1.jpg" />
      </span> 
    </a>
  </td>
</tr>
</table>