Question

I have 3 icons on a page side by side. What I am wanting is when a user hovers over the icon a small text span slides out to the left.

So that (no hover):
[IMG]

Hover (text slides out): SOME TEXT [IMG]

I am using this code for each icon:

<div class="cgs"><span class="cgstext">1. Connect</span><a href="#"><img src="images/cgs/connect70h.png" width="69" height="70" alt="Connect"></a></div>

If the icon was on the left and text on the right I would simply use jQuery animate to extended the outer div…but I’m not exactly sure what to do to make the span on the left slide out to the left. I would prefer it to slide out gracefully and if it is in between 2 icons the space to expand gracefully (and contract gracefully on hover out) if possible.

Any help is appreciated!

Answer 1

This should be enough to get you there. I had to change your html, css, and add some js. Don’t use a span because you can’t set a width on it. Thus making animate useless. Instead I made it a div set to inline-block. You can then animate it properly. The rest is just javascript which it sounds like you know how to already anyhow.

Hover over an image.

http://jsfiddle.net/Mx2JS/3

<div class="cgs">
    <div class="cgstext">1. Connect</div>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
</div>


$('a').hover( function() {
    $('div.cgstext').animate( { width:100 }, 500);
}, function() {
    $('div.cgstext').animate( { width:0 }, 500);
});