Well, thats definitly perfect.
I think, some users would use this function for their pages as well .. many many thanks for this work.

I understand, so let me show the issue:
This is how the backend is set: https://ibb.co/Jp0kRHJ
This is the frontend: https://ibb.co/qd94H6y
It is just an balc overlay that appears when you move the mouse over. The css is the same as above. I can send you the login by email, if this is more helpful

Many thanks @guenni007 .. i like this slowing up, nice gimmick.
I would like to have this also on the static overlays on images, can you help me with this? I have tried but do not get this animation, i think i usaing always thw wrong Styles…

/** hover on img ***/
#top .av-overlay-hover-deactivate:hover .av-caption-image-overlay-bg {
    opacity: 0.6 !important;  background-color: #000000;   }
#top .av-overlay-hover-deactivate .av-caption-image-overlay-bg {
  opacity: 0 !important; }
.av-image-caption-overlay-center {opacity:0!important;}
.av-image-caption-overlay-center:hover  {opacity:1!important; font-size: 20px !important;  }

.btn-blue {background: #0097D7; font-size:50px; height:80px; width:80px; 
font-weight: 800 !important; margin: 20px auto !important; line-height: 75px; }

This have been some test for searching the fix … it seems that the transparecy is working on the image, not on the overlay therefore the image is not visible and the overlay becomes grey (from white background) and does not show the image below.

from the logic perspective, this should work and set only the overlay as transparent bit it shows only a white background.:

.image-overlay { background: rgba(0,0,0,0.6) !important; }

No one an idea?
I have found this slution but it only add the title as overlay, not the description.

`/* Portfolio overlay with title */

/* Disable default animation */
#top .grid-entry a:hover .image-overlay .image-overlay-inside {
animation: none;
}

/* Overlay */
/* Portfolio overlay with title – disable default animation */
#top .grid-entry a:hover .image-overlay .image-overlay-inside {
animation:none;
}

/* Portfolio overlay with title – overlay */
#top .grid-entry .image-overlay .image-overlay-inside:before {
content:”;
position:absolute;
background:#000000; /* blue */
height:100%;
width:100%;
border-radius:0;
top:0;
left:0;
margin:0;
}

/* Portfolio overlay with title – remove default title below */
.grid-content .avia-arrow,#top .grid-entry .grid-content {
display:none;
}

/* Portfolio overlay with title – display title on hover*/
.grid-entry a:hover:before {
content:attr(title);
position:absolute;
width:100%;
z-index:1000;
text-align:center;
opacity:1;
font-size:18px;
color:#fff!important;
transform:translateY(-50%);
animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important;
top:50%;
padding:0!important;
display:flex!important;
align-items:center;
justify-content:center;
}

.avia_transform a:hover .image-overlay {
opacity:1!important;
}

Fantastic, this works excellent.
Thank you

Exzellent, this works fine.
Thank you

Thanks, this works fine on desktiop but
– mobile they dissappear somewhere
– they not clickable

• This reply was modified 3 years, 4 months ago by xeovision.

My fault, i mean WordPress :)
OK, i will try with FTP but i will get the same save error everytime i add a new function. Any idea why WP wont accept this ocde?

UPDATE: By FTP ..code is working fine, have changed
$key[‘text_before’]
…so got the position i need.

Many Thanks

• This reply was modified 3 years, 4 months ago by xeovision.

Thats cool. many many thanks for solving the issue and the bug fixing