Portfolio grid: Questions

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

Then grid-content is a sibling ( not a descendent ) to the anchor
so maybe you had to use the sibling selector for it (a:hover.grid-image + .grid-content)

just for info:
the general sibling selector is the tilde : ~ ( that means all siblings those before and after the selected element )
but if we want the adjacent sibling it is the plus sign : +

you can even influence the transiton for it not synchronized by:

transition: 0.3s opacity ease, 1s transform ease;
separated by commas

but – sorry then i would like to see your site!
Always rebuilding the situation on my own sites costs a lot of time.
__________
one thing to mention before this to the developers. I do not understand why some of the settings in enfold css are set to !important.
Each individual change stops working on this.

F.e.:
The rule in image.css :

.av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg{opacity: 0 !important;}

it will work too without that setting to important. But it is hard to overwrite if we like to change it.

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.

no login is needed – send me the page it concerns. Screenshots do not help me.

Maybe I’ll explain what I’m talking about:
If I have a live page, I can test and examine all css settings in advance using the developer tools that come with such a browser – without ever having to change anything in your source code. The setting as you have created the ALB is then in the DOM as your settings are. Even jQuery scripts can be run in the console. So a screenshot is not really a substitute for the live page.
It would also be enough for me if you find a page in the demos that is set analogously to yours. For example: if you tell me that you are interested in the images like here: https://kriesi.at/themes/enfold-2017/elements/image/.

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