(Gallery Block) Add a Title over Image, but keep Description under Text

#1. First, enable Gallery Block Title

#2. Next, edit Image > Add some Title > Use this format with <em> tag

Title <em>Must go faster... go, go, go, go, go! God help us, we're in the hands of engineers. Hey, you know how I'm, like, always trying to save the planet? </em>

You will have a result like this

#3. Use this code to Page Header Code Injection (page where you use Gallery Block Grid)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>
<script>
$(document).ready(function(){
    $('.slide').each(function(){
    var cr = $(this).find('.image-slide-title em');
    var cr2 = $(this).find('.content-fill');
 $(cr2).append(cr);
  });
});
</script>
<style>
.image-slide-title em {
    position: absolute;
    top: 50%;
}

.slide .content-fill em {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.slide .content-fill {
    position: relative;
}
.slide .content-fill:after {
    content: "";
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}
</style>

Result: