How do I make a span element slide out from behind an image using jQuery?

I'm using jQuery to make a span element slide out (like i开发者_StackOverflowt's coming from behind an image).

For testing go to http://www.sodrie.be/collectie.html and hover over brand image.

The span element is positioned 'absolute'. When I do relative it doesn't work.

This works perfect in Firefox but not in Chrome or Safari. I don't know about IE; I should test it.

UPDATE 02/03/2011

The problem is that in Chrome it is working on the first page but when i slide to the second page (arrow on the right). It's not working there!

I think I found your problem. You haven't paid any attention to the specifications of position.

Your site is working quite well and it is also showing your spans, but out of the screen. IE8 even shows a scrollbar when hovering over in the second page.

Solution: You need to set your parents of the span also to a position. Which is something you haven't done yet.

So looking at your structure, you are using LI's to shove around. These are the elements that are moving, so they should be the big position parent. Your structure is like this:

<div class="sections"> <!-- make this relative, this is your giant parent -->
    <ul>
        <li> <!-- make these relative, your divs should be bound to this -->
            <div class="item"> <!-- make these relative, so your span can be relative to it -->
                <!-- image here -->
                <span class="info_img"><!-- more --></span> <!-- make this relative, because you want to -->
            </div>
        </li>
    </ul>
</div>

Here's a solution with position:relative

http://jsfiddle.net/UeSsu/4/

This should work cross browser.