jquery: help center variable size div on image hover
<p>I have a little problem I don't understand. I made a jsfiddle to illustrate it.</p>

<p><a href="http://jsfiddle.net/sandrodz/czfGy/9/" rel="nofollow">http://jsfiddle.net/sandrodz/czfGy/9/</a> (updated to include images)</p>

<p>So when user hovers on image it should div is revealed which contains text "sunny cloudy" this massage varies so it can be smaller or larger.</p>

<p>I want it centered over the image. But unfortunately my jquery logic doesn't work correctly and hover appears shifted to the left.</p>

<p>Any ideas?</p>

<pre><code>$("#tempicon img").hover(function() {
    divW = ($(this).next("div").width() / 2) - ($(this).outerWidth() / 2);
    $(this).next("div").css({marginLeft: -divW }).animate({ opacity: "show" }, "fast");
}, function() {
    $(this).next("div").animate({opacity: "hide"}, "fast");
});
</code></pre>

<p>To add to the confusion, I use same exact code on the other div and it works perfectly :S</p>
