How to get rid of curved arrow on linked images, and allow image title to show

it would be nice to have the title inside that span.image-overlay-inside
This would be easy if the overlay exists from the beginning ( on page load) . On avia.js – we see – it is generated via if(!overlay.length)
having a whole child-theme avia.js seems to be a way – but we can use mutationObserver to see when it is added to DOM – and then insert the title.

in my test case i gave a custom class to the image alb element : show-title
now i can observe these classes if there is a new node added – and if so – add some html to it ( btw. i use the aria-label from the anchor – because if you set a custom title to the image alb this will be better to have)

function transfer_label_to_overlay(){
?>
<script>
(function($) {
  var target = document.querySelectorAll(".show-title");
  var observers = [];
  // configuration of the observer
  var config = { attributes: true, childList: true,  subtree: true  };

  for (var i = 0; i < target.length; i++) {
      // create an observer instance
      observers[i] = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {            
            $(mutation.addedNodes).find(".image-overlay-inside").each(function() {
              var imgLabel = $(this).closest('.avia_image').attr('aria-label').replace(/\-|_/g,' ');
              $(this).append('<span class="overlay-title">'+imgLabel+'</span>');      
            });
          });
      });
      // pass in the target node, as well as the observer options
      observers[i].observe(target[i], config);
  }
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'transfer_label_to_overlay');

now for quick css:

.avia_transform .show-title a:hover .image-overlay {
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.1);
}
/*** styling the title is up to you ****/
.overlay-title {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
  font-size: 16px;
  line-height: 24px;
  font-family: var(--enfold-font-family-body);
  color: var(--enfold-main-color-heading);
  text-shadow: 1px 1px 3px #333;
  background-color: rgba(255,255,255,0.8);
  padding: 0 20px 5px;
  border-radius: 5px;
}

( if you do not want the hover image behind the title set the pseudo-class to display : none)

.show-title .image-overlay-inside::before {
  display: none;
}

see: https://webers-testseite.de/image-title-to-hover/
left hand – no custom class : show-title – right hand: with custom-class.