Images enlarge on hover but vertical images not returning to normal on mouseout
<p>Horizontal images enlarge and return to normal but vertical images enlarge and then return horizontal not vertical. I have <a href="http://jsfiddle.net/RwJhn/" rel="nofollow">this fiddle</a>. I'm not sure but believe the issue is in jQuery. I'm very new to jQuery but this seems to be the only way to achieve what I need since each image is also a form submit button. This can be seen at www.starcuts10.com/poems</p>

<p>CSS:</p>

<pre><code>#container {
    display: block;
    width: 100%;
    position: relative;
}

.img {
    position: relative;
    z-index: 0;
}

.end {
    margin-right: 0;
}

.clear {
    clear: both;
}

.img a img {
    position: relative;
    border: 0 solid #fff;
 }

.form_align {
    display: inline;
    float: left:
}
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready(function() {
    var cont_left = $("#container").position().right;

    if ($('span').hasClass('horz')) {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "405",
                width: "638",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "250",
                width: "425",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });


        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    } 
    else {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "638",
                width: "405",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "425",
                width: "250",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });

        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    }
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="container"&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;span class="horz"&gt;
                &lt;span class="vert"&gt;    
                    &lt;td&gt;
                        &lt;form class="form_align" method ="post" action="#"&gt;
                            &lt;a href=""&gt;&lt;input type="image" src="http://starcuts10.com/images/blue_box.png" class="img"&gt;&lt;/a&gt;
                            &lt;input type="hidden" name="img" value="http://starcuts10.com/images/blue_box.png"&gt; 
                            &lt;input type="hidden" name="poem" value=""&gt;
                        &lt;/form&gt;
                    &lt;/td&gt;
                &lt;/span&gt;
                &lt;span class="vert"&gt;    
                &lt;td&gt;
                    &lt;form class="form_align" method ="post" action="#"&gt;
                        &lt;a href=""&gt;&lt;input type="image" src="http://starcuts10.com/images/red_box.png" class="img"&gt;&lt;/a&gt;
                        &lt;input type="hidden" name="img" value="http://starcuts10.com/images/red_box.png"&gt; 
                        &lt;input type="hidden" name="poem" value=""&gt;
                    &lt;/form&gt;
                &lt;/td&gt;
            &lt;/span&gt;  
        &lt;/tr&gt;
    &lt;/table&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;/div&gt;
</code></pre>
