centering variable width span on top fixed size image with jquery
<p>Here is the <strong><a href="http://jsfiddle.net/LK2jq/" rel="nofollow">jsfiddle</a></strong></p>

<pre><code>//Fade in and out animation on hove buttons - icon set, features.
$(window).load(function() {
    $("ul#features_icons li img").hover(function() {
        $(this).next("span").animate({ opacity: "show" }, "fast");
    }, function() {
        $(this).next("span").animate({opacity: "hide"}, "fast");
    });
});
</code></pre>

<p>I'm trying to accomplish a hover on effect, where contents of the span will be display:none, but as soon as you hover on it will become display:block. With css I managed to put it on the top of the image by using negative margin, but my problem is to center this span in relation to the image.</p>

<p>Any ideas?</p>

<p>with css it is not possible. So must be with jquery something?</p>

<p>Thanks!</p>
