Help With Captions

[realph]

Hey Guys,

Ran into a bit of a problem I’m not sure how to solve. I’ve got this gallery page which consists of thumbnails, each thumbnail has a caption to go with it. The problem I’m having is when a caption has more than one line of text the caption box gets bigger, that’s fine and all but I’d like the caption box to be aligned to the bottom so it looks normal.

This is how it looks at the moment:

And here’s the CSS:

.ngg-caption {

position: relative;

padding: 5px 0 5px 25px;

text-align: left;

z-index: 89;

font-size: 1.3em;

line-height: 1.5em;

color: #fff;

background-color: #000;

bottom: 32px;

}

I hope I’ve explained what I’m trying to do, any help would be appreciated.

Thanks in advance.

[realph]

I’m not using

, should I be using it?

Here’s a link: http://www.ericouture.com/gallery/test-page/

[realph]

Ok, but what if I want the caption to sit on top of the image, keeping the bottom part of the caption aligned to bottom most part of the image?

[realph]

That’s perfect Paulie, thanks! I’ll let you know how I get on.

[wolfcry911]

Here’s an even simpler version – it eliminates the unnecessary p inside figcaption
http://jsfiddle.net/NZKBH/28/

[realph]

Thanks a bunch @wolfcry911!

[joshuanhibbert]

Nice work @wolfcry911. I have taken it a step further just for fun: http://jsfiddle.net/sl1dr/44ZpX/

[realph]

@wolfcry911, So finally I’m trying to add a credit to the thumbnail, but I’m not sure if I’m using vertical-align correctly. The aim is to have the credit centered vertically.

Here’s my fiddle at the moment:
http://jsfiddle.net/NZKBH/50/

[wolfcry911]

Try this
http://codepen.io/wolfcry911/pen/CoJqH

[realph]

Perfect @wolfcry911, why didn’t I think of using a background image? You’ve been a huge help, I owe you one!

Thanks again!

[Author]

Posts