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, 3 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, 3 months ago by xeovision.

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

@ismael Meanwgile i have solved the full width and the read more button.
But i do not find a way to add the category below the headline

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

This is what i want: https://ibb.co/ZxNRZWQ

BUT only in some blocks, not all content block, othe should still have 100%

Login -> PM

Cool .. this works excellent.
Many thanks

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