Text over Image (Gallery Block – Stack)

Add this code to Footer – Code Injection and click Save

<!-- Gallery Block - Stack - by @phuong - tuanphan -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.sqs-gallery').children('.image-wrapper').each(function(index) {
        var newVideoWrapper = $('<div class="newVideoWrapper"></div>');
        $(this).next('.meta').appendTo(newVideoWrapper);
        $(this).appendTo(newVideoWrapper);
        $('.sqs-gallery').append(newVideoWrapper);
    });
});
</script>
<style>
  .newVideoWrapper {
    position: relative;
    margin-bottom: 40px;
}

.newVideoWrapper .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
    width: 100%;
}

.newVideoWrapper .meta .meta-inside {
    margin: 0 !important;
    padding-left: 10px;
    padding-bottom: 20px;
}
</style>

After using the code:

Before using the code: