CSS position absolute in inline elements

Question

I am using this tutorial for image hover effect: http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/

Last overlay is still always in line while image thumb is already in another line.

Here is screenshot: https://i.stack.imgur.com/IUumO.jpg Every thumb looks like this:

<a href="image.jpg">
    <span class="overlay"></span> <!-- this is position:absolute -->
    <img src="thumb.jpg">
</a>

Thank you for your help.

Answer 1

Check this: http://jsfiddle.net/XSgq4/

<div class="overlay">
    <a href="http://www.stackoverflow.com/">
        <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png" />
    </a>
</div>

CSS

.overlay {
    display:inline-block;
    position:relative;
}
.overlay > a:hover:after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, .3);
}

Or a span version: http://jsfiddle.net/XSgq4/1/