Captions in lightbox mode 7.1

Site URL: https://orchid-piano-9tpj.squarespace.com/ragnaroken

I have searched but not found the correct code. I want captions to appear on hover in the gallery - this I have found a code for.

I also want captions to appear when the image is opened in lightbox - this I can't find a code that does the trick. I want this on all pages.

This is the code I have for hover in galleries

figure.gallery-strips-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #000000; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Kindly copy this snippet in Code injection, 

<style>
  .lightbox-caption {
    display: block;
    z-index: 9999;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
</style>
<script>
  $(document).ready(function(){
    $('.gallery-lightbox-item-img').each(function(){
    var alt = $(this).find('img').attr('alt');
    $(this).append('<div class="lightbox-caption">' + alt + '</div>');
    });
});
</script>

Thank you @bangank36 - Finally it worked! 

23 minutes ago, mathildenicoline said:

Thank you @bangank36 - Finally it worked! 

You rock!

Hi there. Wondering if there is any CSS that can be inserted to achieve this effect? I inserted some CSS code to make it so hovering over images in my gallery reveals captions. But, now clicking on the images does nothing. I can't have them link to anything and spotlight doesn't work at all! Do you know of a simple fix for this only using CSS? Thanks.  

16 hours ago, jimmydisplayname said:

Hi there. Wondering if there is any CSS that can be inserted to achieve this effect? I inserted some CSS code to make it so hovering over images in my gallery reveals captions. But, now clicking on the images does nothing. I can't have them link to anything and spotlight doesn't work at all! Do you know of a simple fix for this only using CSS? Thanks.  

No. You need to use above JavaScript/CSS to achieve this.

Hi I am looking for the same solution as above. But the code did not work for me. 

https://bassoon-buttercup-n76w.squarespace.com/kings

PW Sloan

Any Help would be greatly appreciated with upvotes and any design assistance in return

On 12/15/2020 at 3:19 PM, tommywhitty said:

Hi I am looking for the same solution as above. But the code did not work for me. 

https://bassoon-buttercup-n76w.squarespace.com/kings

PW Sloan

Any Help would be greatly appreciated with upvotes and any design assistance in return

We need to include the jquery before implementing my previous code

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

Hope it makes sense