There is a table in which pictures of different sizes are inserted; when you hover over a line, the picture in one of its cells should increase.
$('.table-about tr') .mouseover(function() { $(this).find("img").css("width", parseInt($(this).find("img").css('width'))*1.1)}) .mouseleave(function() { $(this).find("img").css("width", parseInt($(this).find("img").css('width'))/1.1)}) .table-about td img{ transition: 800ms; position: absolute; top: 0; height: auto!important; } .table-about td { position: relative; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table border="0" cellpadding="1" cellspacing="1" class="table-about" style="width:100%"><tbody><tr><td style="height: 195px; width: 284px;"><img alt="" src="http://bm.let120.net//ckfinder/userfiles/images/comp1.png" style="height: 162px; width: 263.636px;"></td> <td> </td> <td>- NTRCN NEN ,ELTN</td> </tr><tr><td style="height: 170px; width: 250px;"><img alt="" src="http://bm.let120.net//ckfinder/userfiles/images/comp2.png" style="height: 178px; width: 265.455px;"></td> <td> </td> <td>- F 'NJ TOT JLBY NTRCN DJN NFRJQ DJN JY</td> </tr><tr><td style="height: 120px; width: 200px;"><img alt="" src="http://bm.let120.net//ckfinder/userfiles/images/comp3.png" style="height: 191px; width: 222.727px;"></td> <td> </td> <td>-"NJ GHBVTH GHBVTH GHBVTH</td> </tr></tbody></table> I tried to write a script that helps to implement it, but if you drive quickly with the mouse, the pictures start to grow or shrink without any control. I don’t mind if it is written in regular styles, but I didn’t find a normal way, since initially all the pictures are of different sizes, and it’s not possible to prepare them in advance
