Check out the code snippet I created on this link
The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously?
Below is the HTML code:
<table border="1">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" width="100" height="100">
</td>
<td>
<img src="image2.jpg" alt="Image 2" width="100" height="100">
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" alt="Image 3" width="100" height="100">
</td>
<td>
<img src="image4.jpg" alt="Image 4" width="100" height="100">
</td>
</tr>
</table>
And here is the CSS:
img:hover {
border:1px solid #0000ff;
width:120%;
height:120%;
}