JQuery image zoom

by Lazar N

HTML

<div id="gallery">
    <img src="http://img.ifcdn.com/images/7989c76e1fdc5ae612e04470c24361c2dc1987020553b6c7320796958a06488e_3.jpg">
    <img src="http://static.giantbomb.com/uploads/square_medium/4/48451/2069721-tool_band_208533.jpg" id="gal2">
    <img src="https://v.cdn.vine.co/r/thumbs/2A596199561247047787305639936_3.1.5.5620307814910317264.mp4.jpg?versionId=Cck4Xzz8pJ9m8WD2w4AY3wFmQ73sX1rO" id="gal3">
</div>

CSS

#gallery {
    width: 31em;
    margin-left: auto;
    margin-right: auto;
}
#gallery img {
    width: 10em;
    height: auto;
    position: absolute;
}
#gal2 {
    margin-left: 10em;
}
#gal3 {
    margin-left: 20em;
}

JavaScript

$(document).ready(function () {
    var fontSize = $("#gallery img").css("font-size"); //equal to 1em?
    var fontInt = parseInt(fontSize);

    var t = $("#gallery img").position().top;
    var tNew = t - (5 * fontInt); //top position

    var l = $("#gallery img").position().left;
    var lNew = l - (5 * fontInt); //left position


    $("#gallery img").css({
        "top": t,
        "left": l
    }).hover(

    function () {

        $(this).stop().css("zIndex", "1").animate({
            height: "20em",
            width: "20em",
            top: tNew,
            left: lNew

        }, 400);
    }, //end mouseover
    function () {
        $(this).stop().animate({
            height: "10em",
            width: "10em",
            top: t,
            left: l,
            zIndex: "0"
        }, 400);
    } //end mouseout
    ); //end hover
});