Well it seems to be best – to use the text block – because selectors stays the same for image with link or without.
On image alb – the selectors change – and we had to differ than if an image alb is used with or without.

See on the bottom of that example page – that on the image with lightbox link it does not work with the same class.
So we had than to make that twice with a different class.

PS: the field definitions are only set by css

you had to think of the custom class on the image with caption. that has to be done on the image alb.
The Text is the caption text. And the css comes to quick css. Every image with caption will than do this layout.

Further reading:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.joshwcomeau.com/css/interactive-guide-to-grid/

You can see how easy it is to influence existing layouts with Gridlayout.
Here it is easier to assign field names to both (the image container and the caption text).
I can then use them in a grid.
This grid now has 2 columns. The rows are created automatically, but their heights are adjusted – and not fixed.
Use this (grid-template-areas: “field2 field1”) to define the order. The other way around, the caption text would be on the left.

Responsive Case had to be set in detail look to the real page.

the section itself is set to : av-small-hide av-mini-hide.
those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

is it because you are working with the other option to show that animation?

if this section and the columns are set to be there on responsive case the class “active” is added.

_____________________

by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

see in action f.e. under “Dienstleistungen”
https://webers-web.info/

Do you prevent the hover for first level menu items? By default, these are available for the desktop menu.
This is the reason – why i had to click (including load of that extra page) to see the sublevel menu-items.

and the answers on https://kriesi.at/support/topic/vertical-align-of-images-in-portfolio-grid/ do not fit ;)

click to enlarge:

the variable regular font of hankengrotesk got 60kb !
loog to those other fonts with over 1MB ! This comes from all the non latin fonts in there.
Think of your performance of the website.

Half-Time in Cologne ;)

we could talk about using the HankenGrotesk Variable font – to have a good fallback solution it might be good to have those static font in the background.
Enfold even supports those varible fonts
see here on firefox developer tools how they can be used:
https://player.vimeo.com/video/748702665

here are both zip files for download:
HankenGrotesk and HankenGrotesk-Variable

The trick will be to have for modern browsers the variable font and for those not supporting variable fonts the static one.

The crux is to activate on general settings the static font – and then have this in your child-theme quick css to force for all browser the variable font:

@supports (font-variation-settings: normal) {
  :root {
    --enfold-font-family-heading:'hankengrotesk-variable',Helvetica,Arial,sans-serif;
    --enfold-font-family-body: 'hankengrotesk-variable',Helvetica,Arial,sans-serif;
  }
  body.roboto {
    font-family:'hankengrotesk-variable'  !important;
  }
  h1,h2,h3,h4,h5,h6,
  #top .title_container .main-title,
  tr.pricing-row td,
  #top .portfolio-title,
  .callout .content-area,
  .avia-big-box .avia-innerbox,
  .av-special-font,
  .av-current-sort-title,
  .html_elegant-blog #top .minor-meta,
  #av-burger-menu-ul li {
    font-family: 'hankengrotesk-variable' !important;
 }
}

The first address to change is on General Styling – Fonts (Tab)
____

on the alb itself you got on styling options all you need : even the font color – and font-size.

The trick is that you can now use this class with different settings (backgrounds, font sizes and colours).

By the way – you are planning to use a chineese translation ? I do not really know why you are using such a performance hungry font for your page. I would at least set the English sentences in a similar Latin font.

For example from your page the comparison of zenkakugothicnew to (on Google Fonts) Hanken Grotesk:

alb : advanced layout builder element – or avia layout builder element.

open your image element – on content : at the bottom – choose to show a caption: “Display a caption overlay?” : enter your text there.

if you entered a text there – than you will have on styling tab an options dialog with some settings for that caption.

with overlay color your desired color (blue) and overlay opacity 1!

see here a solution for image alb element that uses the caption (your text) – with overlay color your desired color (blue) and overlay opacity 1!
css code on that example page:
https://webers-testseite.de/blue-bar-above-image/

i just look now what happens to that code if a link is on the image (external or lightbox) …

On first load – just klick one of the images of the slider – it will open a different link than the title or read-more link.
navigating with the arrows to the nex three links and go back to it than – the link of images and the rest will be ok.

well the hook : ava_main_header is just under the header_meta – it is the first child inside header_main.
Position is perfect. The rest is styling and positioning.

you can create a widget area there – or insert directly just your button:
f.e.:

function custom_func() {
?>
<div class="spezial"><div class="avia-button-wrap avia-button-right"><a href="#" class="avia-button av-link-btn avia-icon_select-yes-left-icon avia-size-medium avia-position-center avia-color-theme-color"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="fontelico"></span><span class="avia_iconbox_title">call to action …</span></a></div></div>
<?php
}
add_action('ava_main_header' , 'custom_func');