hover zoom on image in a table

Question

I have made a table that does not have any space between it as I want it as a map that will get larger when you hover over it. I have used zoom div from W3 schools but it does not work in my table. I think it is something with the size of the table but I don´t really know here is the code

 #casti_male { margin: 0px; border: 0px; padding: 0px; } /*ZOOM MAPY*/ .zoom { transition: transform .08s; width: 214px; height: 115px; } .zoom:hover { -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); } 

 <div id="mapa"> <table id="casti_male" style="width:1495px; height: 804px;" cellspacing="0px;" cellpadding="0px;"> <tr> <td> <div id="zoom"><img src="castimapy-male/obrazky0.png"></div> </td> <td> <div id="zoom"><img src="castimapy-male/obrazky1.png"></div> </td> <td> <div id="zoom"><img src="castimapy-male/obrazky2.png"></div> </td> <td> <div id="zoom"><img src="castimapy-male/obrazky3.png"></div> </td> </tr> </table> </div> 

It is bigger but here is the short version. Basically on hover it is supposed to get larger while not moving anything else AND still being packed together like - here

Answer 1

Use Class instead of Id in Div and it should work like a charm. Check the following code--