Use jQuery to display an image alt tag as a caption overlay

2 min read
demo download

I have seen quite a few plugins around that handle “image captions”, but I thought it could be cool to show how you could create your own custom solutions using a few lines of jQuery. Bear in mind this might not be the best solution for accessibility as alt tags would usually be more descriptive, and geared more towards people that can’t actually see the image, but you can apply the technique to any element, say an anchor tag with a title tag for example. Anyway here goes –

The idea is that we loop through all the images in a given container, grab their alt tags if they are not empty, and then create an overlay in a span tag that will be positioned on the bottom corner of the each image.

I won’t go through the CSS, because you can style your caption however you want to, but here is the JS –

 

Contact


Want to work with me or the Lab19 team? Great news! Reach me using the relevant links below: