How to get this awesome image caption overlay on Weebly

Posted: November 19 2019

Tweet

​Personalise your Weebly blog with this awesome image caption overlay hack.

Add a little code to the Edit HTML/CSS on Weebly to achieve this awesome image caption overlay.

Firstly, I am using a heavily customised Cento - Blog theme:

I say 'heavily customised', all fonts have been altered at source, border and margins all tweaked in some way, which is hardly gonna throw a spanner in the works. The most technical hack is making the Blog Post Titles h1 instead of h2. Not that really matters now, as I am mostly back to using standard pages again.

I cannot vouch for this hack working on any other theme. But you can try. Make a copy of your site first and play around on the COPY SITE before you start customising the html.

I've built my website on desktop and have adjusted 'things' so that the site looks it's best on Android.

There are 2 parts to this hack.

Part 1:

Referring to the screen shot at the top of this post, each of the 6 images shown are actually slide show elements with only 1 image uploaded per slide show.

All I did was to drag the standard Weebly slideshow element to my page, 6 times, to create 2 rows of 3. In the slideshow editor, enter a caption as shown below:

Click SAVE on the image and SAVE top right. I also set the image aspect ratio as:

All images are resized on an Android Photo editing app to 4:3 ratio before uploading.
​

Part 2:

And now for the good bit. The code.

I happened upon this code having studied another hack on how to add image captions and some basic CSS coding techniques and put it all together. I adjusted all the variables 1 by 1, checking how the live version would look. And I think it looks pretty cool.

And the best part about it is that it looks cool on Mobile view too.  Naturally, the images appear in 1 column in mobile view (screenshot is from the Mobile View option in the Weebly Editor):