Question

I wrote this thumbnails gallery using jquery lightbox plugin years ago.

<div class="p">
    <ul class="gallery">
        <li><a rel="lightbox-gallery" href="..."><img src="..."></a></li>
        <li>...</li>
    </ul>
</div>

div.p {
    text-align: justify;
}

.gallery li {
    display: inline;
    list-style-type: none;
}

Maybe it’s not perfect but it spaces evenly on the whole column width and self adapts itself on window resize.

Now pics are nearly 40 and I’d like to add with jquery a little overlay with photo number, something like this:

but I’m having some trouble since elements are inline and not block.

Is it possible to achieve it without changing base style?

Answer 1

position: absolute; will do the trick. The <li> needs to be position: relative.

Demo: http://jsfiddle.net/ThinkingStiff/gH7vH/

HTML:

<ul>
    <li><a><img class="thumbnail" /></a><div class="number">1</div></li>
    <li><a><img class="thumbnail" /></a><div class="number">2</div></li>
</ul>

CSS:

.thumbnail
{
    border: 1px solid black; 
    display: inline-block;   
    height: 60px;
    width: 60px;
    vertical-align: top;
}
li
{
    display: inline-block;
    position: relative;
}
.number
{
    background-color: rgba( 47, 47, 47, .3);
    bottom: 0;
    height: 18px;
    line-height: 18px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 18px;
    z-index: 1;
}