Move Blog Title/Category over First Image

Suppose you want to move the Blog Title/Category over the First Image in Blog Posts

#1. Add a Code Block above the Image Block and enter this code

<div class="title-over-image"></div>

#2. Use this code to Post Blog Item Code Injection or Code Injection – Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('.blog-item-top-wrapper').appendTo('div.blog-item-inner-wrapper div.code-block+div.image-block .image-block-wrapper');
})
</script>
<style>
div.code-block+.image-block .blog-item-top-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}
</style>

#3. Result

#4. If you need to make image fullwidth, replace #2 code with this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('div.blog-item-inner-wrapper div.code-block+div.image-block').insertBefore('.blog-item-wrapper article.entry');
    $('.blog-item-top-wrapper').appendTo('div.blog-item-wrapper>.image-block .image-block-wrapper');
})
</script>
<style>
div.image-block .blog-item-top-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}
</style>

#5. If you need to make image fullwidth + make image behind the header, replace #2 code with this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('div.blog-item-inner-wrapper div.code-block+div.image-block').insertBefore('.blog-item-wrapper article.entry');
    $('.blog-item-top-wrapper').appendTo('div.blog-item-wrapper>.image-block .image-block-wrapper');
})
</script>
<style>
div.image-block .blog-item-top-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
}
  body[class*="type-blog"].view-item article>section:first-child {
    padding-top: 0px !important;
}
div.blog-item-wrapper .image-block {
    padding: 0px !important;
}
</style>