Ein wenig off-topic:

wenn man so einen variablen Font mal installiert hat ( ich habe sicherheitshalber dann beide statische und variable eingebunden) dann wählt man bei Enfold unter Fonts zunächst den statischen als Standard aus, und kann dann per @supports regel diese ersetzen , wenn der User Browser das unterstützt.

z.B.

@supports (font-variation-settings: normal) {
  body.roboto {
    font-family:'roboto-flex';
  } 
  
  #top.roboto h1,
  #top.roboto h2,
  #top.roboto h3,
  #top.roboto h4,
  #top.roboto h5,
  #top.roboto h6 {
    font-family:'roboto-flex';
    font-weight:500;
 }

 #top.roboto .title_container .main-title,
  #top.roboto tr.pricing-row td,
  #top.roboto  .portfolio-title,
  #top.roboto .callout .content-area,
  #top.roboto .avia-big-box .avia-innerbox,
  #top.roboto .av-special-font,
  #top.roboto .av-current-sort-title,
  .html_elegant-blog #top.roboto  .minor-meta,
  #top.roboto #av-burger-menu-ul li {
    font-family:'roboto-flex';
    font-weight:400;
 }
}

um dann die Einstellungen für ein spezielles Element herauszufinden, kann man dieses sich in den Developer Tools der Browser anschauen.
Sehr schön kann dies der firefox – dort gibt es oben rechts den Tab : Schriftarten
Hier zieht man dann die Regler des variablen Fonts solange bis man das gewünschte Ergebnis hat.
( wie immer – click to enlarge the images )

Ist man zufrieden, wechselt man zum Reiter : “Regeln” und kann dann am Element ablesen was man ins Quick css übernehmen muss:

that title you see on the image from: https://kriesi.at/support/topic/how-to-get-rid-of-curved-arrow-on-linked-images-and-allow-image-title-to-show/#post-1427817 – is a “tooltip” and – you can not influence that. It is part of the standard behavior of all browsers – and position is dependent on where your mouse rests over the image. ( The title tag from DOM i used for inserting it to overlay – is part of enfold source code ).

did you follow the link of my test-page? there you have the title tag on that position you like
see: https://webers-testseite.de/image-title-to-hover/

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.