图片动画在表格单元格中使用jQuery，CSS，HTML5对齐

Question

I have picture centered in table cell. Using jQuery I did animation to change size of picture when mouseover cell, but now I need to align that picture to left in a same animation.

I have this HTML code:

<th colspan="2" height="100%" id="PoleAlena">
    <img src="./photos/AlenaKoule.png" id="AlenaKoule" style="width:50%;height:50%;">
</th>

Then I have jQuery code:

$("#PoleAlena").hover (function() {
    $("#AlenaKoule").animate({width: "15%", height: "15%",}, 1000);
});

So what I need is: When mouseover table cell, piscture size will reduce and move to left top conner of same cell.

Thank you for any answer. Regards Libor

Answer 1

Like this?, where one can use transform and hover instead of script

 th { border: 1px solid gray; text-align: left; } th img { position: relative; left: 50%; transform: translateX(-50%); transition: transform 1s; transform-origin: left top; } th:hover img { transform: translateX(-100%) scale(0.4) ; } 

 <table> <tr> <th colspan="2" height="100%" id="PoleAlena"> <img src="http://placehold.it/200/f00" id="AlenaKoule" style="width:50%;height:50%;"> </th> </tr> </table>