jquery animate a hover
<p>I followed the example here</p>

<p><a href="http://www.incg.nl/blog/2008/hover-block-jquery/" rel="nofollow">http://www.incg.nl/blog/2008/hover-block-jquery/</a></p>

<p>And that worked. What I did too was make it bigger and added a background image. Adjusted the CSS to move the hover animation to a specific spot in the background image. That all works too but animates when you hover anywhere over the background image. I would like it to only hover when you hover over the animation image or can i set like margins?</p>

<p>JS:</p>

<pre><code>$(function () {
    $('ul.hover_block li').hover(function () {
        $(this).find('img').animate({
            top: '374px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).find('img').animate({
            top: '0px'
        }, {
            queue: false,
            duration: 500
        });
    });
    $('ul.hover_block2 li').hover(function () {
        $(this).find('img').animate({
            left: '178px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        $(this).find('img').animate({
            left: '0px'
        }, {
            queue: false,
            duration: 500
        });
    });
});
</code></pre>

<p>CSS:</p>

<pre><code>body {
    background: #666
}

ul.hover_block {
    display: block;
    overflow: hidden;
    height: 1%;
    padding-bottom: 15px;
}

ul.hover_block li, ul.hover_block2 li {
    list-style: none;
    float: left;
    background: #fff;
    padding: 10px;
    padding-left: 315px;
    padding-top: 78px;
    width: 500px;
    position: relative;
    margin-right: 20px;
    background-image: url('images/2.png');
    background-repeat: no-repeat;
}

ul.hover_block li a, ul.hover_block2 li a {
    display: block;
    position: relative;
    overflow: hidden;
    height: 400px;
    width: 500px;
    padding: 16px;
    color: #000;
    font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}

ul.hover_block li a, ul.hover_block2 li a {
    text-decoration: none
}

ul.hover_block li img, ul.hover_block2 li img {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;body&gt;
    &lt;ul class="hover_block"&gt;
        &lt;li&gt;
            &lt;a href=""&gt;&lt;img src="images/3.png" alt="" /&gt; &lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
</code></pre>
