Text overlay on lightbox image link

Hi,
My first question is how to get my image links to look like this:
I currently have an image gallery coded using a codebox…I’m not sure how to create the effect above?

I also tried the code you provided but nothing seems to have happened?

Hi, thanks for the reply. My question is actually whether it’s possible to have this overlay text effect for an image that links to a gallery lightbox… I played around with it and it seems like it’s only possible to have that single image open in a lightbox. I wonder if it’s possible to have this effect but also link to a lightbox gallery of multiple images? Currently I’m using a code box to create this effect, but I don’t know how to get the text overlay like in the above example.

Here’s the code I’m using, if that helps:

<div class = "post-entry">
<a href = "URL to your main image"><img src = "URL to your main image" /></a>
<a href = "URL to your other images" style = "display: none;">&nbsp;</a>
<a href = "URL to your other images" style = "display: none;">&nbsp;</a>
etc etc
</div>

Hi,
It would be great if someone could help me with my first question above, how to make the space beneath “check out our demos” smaller:

I’ve tried the code given by Rikard and nothing seems to have happened? Thanks!

Hm, it seems to be fine on Chrome, but in Safari it still looks like the previous image, even after I cleared the cache?

Hi Ismael,
I tried the code and it still looks the same as above, no changes. Yes, I’m on Safari on Mac.

Additionally, I’m having a strange little problem where there’s a little bit of extra padding at the bottom of the grid row, and I don’t know why…

Thanks for the help!

Hi,
I’ve checked and reuploaded my images so they’re all the same size, but I’m still getting the extra space at the bottom of the grid row. Any other ideas?

Also, this white rectangle appears whenever I hover over my lightbox image:

This happens when I first load the page and hover over the images for the first time.

Thanks

Great, that solved it!

About the extra padding below the grid row — I noticed the color is always #f8f8f8, and I was wondering if there’s a way to change just that color, if there isn’t a way to get rid of that extra space completely?

Thanks for the help so far

Thanks! That worked for the grid row on the top of the page, but looks like it didn’t apply to the second grid row at the bottom of the page?

Hi,
Seems like the second grid row on the bottom isn’t affected by the code, even after I put !important after it. Still looks like this:

Thank you! Everything seems to be fine, except for the spacing issue in Safari on Mac…

I assume there’s no fix for that at this moment?

Hi,
Hopefully these images illustrate it better:

I’ve checked on several computers and the extra space in Safari happens on all of them. Everything looks fine on Firefox and Chrome, though…

Thanks for the help!

Great, that fixed it! Thanks for all the help!