Mouseover to Enlarge

Mouseover box to enlarge and increase opacity

HTML

<table>
<tr>
<td id="img">hello</td>
<td>hi </td>
</tr>
</table>

CSS

#img {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
 
}

td{
  border : 1px solid black;
  }

JavaScript

$(document).ready(function() {

                $("#img").css({opacity: 0.5});

                $("#img").mouseenter(function() {
                    $(this).animate({width: "400px", height: "400px"}, 400);
                    $(this).animate({opacity: 1}, 2000);

                });

                $("#img").mouseleave(function() {
                    $(this).animate({width: "200px", height: "200px"}, 10);
                    $(this).animate({opacity: 0.5}, 2000);

                });

            });