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.

wobei ich momentan die gleich svg auf deiner Seite sehe.

Edit: but remember – there are reasons for inline clip-path in svgs. But the one – building the whole rectangle is unnecessary in this case

i did not look completely through your svgs – if there are duplicate IDs ( or even classes – when they were determined differently ) you had to avoid that too!
Not only that this will end up in an invalid html document in case of IDs ;)

can you show me the svg please.
A link to a public place would be ok.

Update to Enfold 4.8.6 and use for the setting auto and a limiting height or none

EDIT – ok i found your website – these svgs do not concern to the svg defiders. – which I mistakenly assumed without seeing the page.

I am not quite sure that I understand the question correctly.
A new “order” is added and it is included to an alb (f.e. a fullwidth-slider, or partner-logo) . On each of the individual customer pages, this ALB then appears again with the changed data, but it is on all customer pages the same banner! ?

________

what if you create a new page – with only that banner. This is the page you had to add the new “order”.
Then you can add that banner via “Page Content” ALB to your customer pages.
Eachtime you edit that Content – it will be synchonized to all customer pages.

PPS : i had to find a solution for much content in small entries … if shifting the content on hover to top
Edit: done – just set the beginning opacity to zero for grid-content.

see f.e. here: https://webers-testseite.de/xeovision4/

.grid-entry  .inner-entry {
  overflow: hidden !important
}

.grid-content {
  display:flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  width: 100%;
  height: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.9) !important;
  z-index: 0;
  opacity: 0;
  transition: 1s all ease;
  pointer-events: none;
}

.grid-content * {
  background: transparent !important
}

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

.grid-content .avia-arrow {
  display: none;
}

a:hover.grid-image +  .grid-content {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: 1s all ease;
}

PS : the excerpt should not be too long. If so – you must accept that there will be a cutoff on that. You then had to choose for grid-content
justify-content: flex-start;

btw: the pointer-events: none is important – otherwise you will loose link functionality on anchor.

• This reply was modified 4 years, 5 months ago by Guenni007.

First : what should this do – is an outcommentation for you ?
xxxopacity: 0;

Next: the whole overlay story is that the
overlay-color comes from image-overlay class
and
overlay-image comes from image-overlay-inside class

don’t know why this happens – you can avoid it by quick css:

.responsive #top.page-id-206 #av_section_2 .flex_column:first-of-type {
margin-top:-450px ;
margin-bottom:100px;
}

so why don’t you use then instead masonry ! The Masonry offers to show even Portfolios.
if you do not like the 3d animation – get rid of it by:

.avia_desktop.avia_transform3d .av-masonry-entry {
    perspective: none !important;
}

yes – seems to be a good idea.

By the way – if you want to do it the very right way – the image could be defined by that:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

see: https://ogp.me