Result

jQuery

//ホバーイベント
$(".more").hover(function() {
    $(this).stop().animate({
     //アニメーションエフェクト
        width: '225px'
    }, 200).css({
        'z-index': '10'
    });
}, function() {
     //非ホバー時の処理
    $(this).stop().animate({
        width: '25px',
        height: '25px'
    }, 200).css({
        'z-index': '1'
    });
});​

css

.more{  position:relative; width:25px; height:25px;  padding:2px; text-align:left; overflow:hidden; }
            
.more span{ position:absolute; left:32px; width:160px; padding:0px 0 0 0px; color:#000; font-weight:bold ;  }

#test{ position:relative; top:50px; left:213px;}

html

<p class="more">   
            <a href="javascript:void(0);">
   <img src="foo.png"/></a>
            <span>bar!</span>
</p>