Hi Günter – thanks

Yes, that is definitely the better phrase.
you see the word by word translation on German is misleading:
It is the oposite way as described.

This way with page array

if( is_page ( array ( 21, 8675, 13792, 14614 ))){ 

first : i do not like the big white rectangle when the letters change – then maybe a text-shadow will do the job:

#top .av-rotator-container-inner {
	text-shadow: 3px 3px 10px #000 !important;
}

.av-marked-text .av-rotator-text-single {
	background-color: transparent !important
}

or in additon a little outline with a modern method to add outline ( only IE11 does not support this) – replace the first rule with:

#top .av-rotator-container-inner{
	text-shadow: 2px 3px 4px #000 !important;
	-webkit-text-stroke: 1px black
}

if you like it with more browser support – that little trick will do – replace the first rule with:

#top .av-rotator-container-inner {
	text-shadow: 3px 3px 5px #000, -2px -2px 0 #000,   2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

First of all – do you still need the jQuery Migrate on your installation?
It is still active. You can avoid loading it on Performance : “Disable jQuery Migrate”

This has nothing to do with your problem at first, but if your plugins are up to date, there should be no reason not to disable it.
If you experience problems afterwards, you can undo it.

__________

Do you use Gutenberg on your Enfold Installation? – or the Classic Editor?
Some Addons on Gutenberg Editor can cause such a problem ( f.e.: Ultimate Addons for Gutenberg )

you don’t have to insert the css code above – because it is part of that css belongs to layerslider – but on some reasons this is not loaded.
If you put in the css code above – you will see that the gray rectangle is gone.
But i do not see any of this .ls-hidden rules in your css.

maybe this is an alternative:
https://wordpress.org/plugins/menu-items-visibility-control/
there are additonal fields on each Menu-Item – you can insert conditional tags there ( f.e. is_home() or ! is_home() etc pp )
https://codex.wordpress.org/Conditional_Tags
so it will be possible to even have is_user_logged_in() etc.

the css rule for ls-hidden is missing in your stylesheet !
if you add to quck css this – you will see that it will work:

.ls-hidden {
    width: 0px !important;
    height: 0px !important;
    position: absolute;
    left: -5000px;
    top: -5000px;
    z-index: -1;
    overflow: hidden !important;
    visibility: hidden !important;
    display: block !important;
}

what is your setting on Enfold (Child) : Layout Builder :

• Integrated (Bundled) LayerSlider Plugin and
• Layerslider Options

i have no problems with layerslider this way.
Do you have installed a stand-alone Version? and do not use the implemented function?

Can you check your advanced Layerslider insertion on that page.
F.e. remove it and place again your layerslider – and save the page.

yes – but think of new jQuery 3.5.1
jQuery(window).load(function(){ : it is deprecated – you had to use now:
jQuery(window).on( 'load' , function(){

my observation is that it would be very hard to determine for one page a shrinking if you do not have shrinking header on enfold options page.
Guess it has something to do with embedding the scripts needed and to get rid of html class – set from beginning. Maybe Guenter knows a way to get this way around.
But as i see – there is a shrinking header – that is possible to get rid of for one page

i would use the filter a bit different. – Replace that code above ( save a copy of that snippet ) :

function avf_header_setting_filter_mod($header) {
  if ( is_page(21) ) {
    $header['header_layout']      = 'logo_left main_nav_header menu_right';
    $header['header_sticky']      = 'header_sticky';
    $header['header_shrinking']   = 'disabled';
    $header['header_stretch']     = 'disabled';
    $header['header_size']        = 'custom'; // slim, large or custom
    $header['header_custom_size'] = '45' ; // if custom size : integer value in px
    // on default we do add here classes by .= but in this case
    $header['header_class'] = " av_header_top av_logo_left av_main_nav_header av_menu_right av_custom av_header_sticky av_header_shrinking_disabled av_header_stretch_disabled ";
  }
  return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 10, 1);

PS : on dropdown custom pixel value option less than 45px are not possible – on that snippet above you can even choose less than 45px

ok – thanks:
see here: https://webers-testseite.de/hover-images/

the trouble with it is – as mentioned above – that in image.css there is a rule set to !important.
We must avoid that – here is the possibility to have a child-theme image.css. But i hope that developer will prove that standard enfold behavior will work without !important setting – and remove it on next update.

Basic: Put in the custom css field of your image : hoverstyle2

First:
Snippet to have child-theme alb element replacement:
(for child-theme functions.php ):

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

Second:
download from pastebin these two files ( the child-theme image alb files ):
https://pastebin.com/ndewwkx7 or download
https://pastebin.com/WJTbAxJJ or download

Third:
Upload these two files to a child-theme folder named: “shortcodes”

Fourth
To preserve the alb setting for overlay color and opacity we store this overlay opacity in a variable and transfer that to a container of our choice:

function style_a_hover_state(){
?>
<script type="text/javascript">
(function($) {
  $(document).ready(function(){ 
        $('.avia-image-container.hoverstyle2').each( function() {
        var initialOpacity = $(this).find('.av-caption-image-overlay-bg').css('opacity');
			$(this).find('.avia_image').hover(function() {
			  $(this).find('.av-caption-image-overlay-bg').css('opacity', initialOpacity );
			}); 
        });  
  }); 
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'style_a_hover_state');

Last:
put this to your child-theme quick css:

.hoverstyle2 .image-overlay {
  display: none !important;
}

.hoverstyle2 .avia-image-overlay-wrap .av-image-caption-overlay {
  pointer-events: none;
}

.hoverstyle2 .avia-image-overlay-wrap .av-image-caption-overlay {
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s transform cubic-bezier(.77,0,.18,1);
}

.avia-image-container:not(.av-hover-grow).hoverstyle2 .avia-image-overlay-wrap .av-image-caption-overlay {
  opacity: 1;
  transition: 0.5s all cubic-bezier(.77,0,.18,1);
}

.hoverstyle2 .avia-image-overlay-wrap a:hover.avia_image .av-image-caption-overlay {
  opacity: 1;
  transform: translateY(0);
  transition: 0.5s transform cubic-bezier(.77,0,.18,1) 0.3s , 0.5s opacity ease 0.5s;
  overflow: visible;
}

.hoverstyle2 .av-caption-image-overlay-bg {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.av-hover-grow.hoverstyle2 .av-caption-image-overlay-bg {
  width: calc(90% - 50px);
  height: calc(90% - 50px);
}

.av-hover-grow:not(.av-hide-overflow).hoverstyle2 .av-caption-image-overlay-bg {
    width: calc(110% - 50px);
    height: calc(110% - 50px);
}

.av-image-caption-overlay-center p {
    padding: 5px;
}

.av-hover-grow.hoverstyle2 .avia-image-overlay-wrap:hover a.avia_image::before, 
.av-hover-grow.hoverstyle2 .avia-image-overlay-wrap:hover a.avia_image::after {
  transform: scale(0.9);
}

.av-hover-grow:not(.av-hide-overflow).hoverstyle2 .avia-image-overlay-wrap:hover a.avia_image::before, 
.av-hover-grow:not(.av-hide-overflow).hoverstyle2 .avia-image-overlay-wrap:hover a.avia_image::after {
  transform: scale(1.1);
}

PPS: these little frames growing on hover are hoverstyle1:

.hoverstyle1 .image-overlay {
  display: none !important;
}

.hoverstyle1 a.avia_image:before, 
.hoverstyle1 a.avia_image:after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
  pointer-events: none;
  background: transparent;
  width: auto;
  height: auto;
  z-index: 10;
}

.hoverstyle1 a.avia_image:before {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
}

.hoverstyle1 a.avia_image:after {
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: scaleY(0);
  -ms-transform: scaleY(0);
  transform: scaleY(0);
}

.hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:before, 
.hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:after {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

Result page: https://webers-testseite.de/hover-images/
so – if you like both hoverstyles on the image – put in the custom css field: hoverstyle1 hoverstyle2

PM is not for me- i’m participant as you. So when i should help you – you had to be more precise what settings of image alb you set. And the most easiest way is to show me a page where this should work.