Fullwidth slider caption fading in instead of sliding in sidewards

Hi Jordan,

Thank you for the link.

I removed the code which disabled the caption slide from Quick CSS.

Then I opened FileZilla and connected to my server.

I went to wordpress > wp-content > themes > enfold > css > custom.css (in “enfold child”, I couldn’t find an custom.css file).

I dragged the custom.css file to my desktop and opened it with TextEdit (I also have Adobe Dreamweaver on my MacBook but never used it so far).

Then I inserted the following code below “Desktop Styles”, “/* Add your Desktop Styles here */”:

.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title, .avia_transform .av_slideshow_full .active-slide .avia-caption-content, .avia_transform .av_fullscreen .active-slide .avia-caption-content {
visibility: visible;
-webkit-animation: none !important;
-moz-animation: none !important;
animation: none !important;
}

I dragged the custom.css file back to the server (Action: Overwrite).

Then I did a hard refresh in Chrome (hold shift and click the reload button).

Unfortunately, it doesn’t work. The caption still slides in from the left.

What did I wrong?

Best regards,
zizibe1

Hi Jordan,

Thank you for your reply.

OK, I added the code to Quick CSS. Now the sliding of the caption is disabled.

What should I do next?

Best regards,
zizibe1

Hi Jordan,

Thank you for the code.

I added it to Quick CSS and did a hard refresh in Chrome.

Unfortunately, it doesn’t work.

Best regards,
zizibe1

Hi Basilis

Thank you for your reply.

I added the code at the very bottom of Quick CSS, but it didn’t work either.

Best regards,
zizibe1

Hi Ismael,

Thank you for replacing the code.

Now, the caption is fading in, but the timing is taking too long.

The timing of the caption should be the same as here:

https://kriesi.at/themes/enfold-business-flat/

I experimented with the parameters of your code, but I couldn’t figure it out.

Could you help me please?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

I set the duration to “1s”. But the animation is not as smooth as in the Enfold Flat Business Demo.

When I open my front page, the caption is already slightly visible. But the caption should come “out of nowhere”. Besides, the transition to full opacity is a little bit abrupt.

I set the the opacity to “0”. But this didn’t really help. I also experimented with the four parameters of the cubic-bezier. But I couldn’t figure out how it’s done in the Enfold Flat Business Demo.

How can I improve the animation of my caption?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

As I mentioned in my last post, I already set the opacity to “0”:

@-webkit-keyframes avia_appear_fade {
  0%   { opacity: 0;  }
  100% { opacity: 1; }
}
@keyframes avia_appear_fade {
  0%   { opacity: 0;  }
  100% { opacity: 1;  }
}

I also checked the link you mentioned, but as far as I can see, they did the same.

Still, my impression is that the animation of my website isn’t exactly like the animation of the Enfold Flat Business Demo. Are the values really the same?

Best regards,
zizibe1

Hi Ismael,

Thank you for adjusting the animation values and the information about the demo.

I changed 0.6s to 1s to make the animation a little bit better visible.

-webkit-animation: avia_appear_fade 1s  1 ease-in;
animation: avia_appear_fade 1s  1 ease-in;

Now the animation almost meets my expectations. My idea is that when you open the page, for a brief moment – maybe 1s or less – there’s only the image visible without the caption. Is there a possibility to increase the time interval between the opening of the page and the beginning of the animation?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

I added the delay to the CSS code. Unfortunately, it doesn’t work as requested.

Now, when you open the page, the caption is already there. After two seconds, the caption disappears and fades in.

But my idea was that when you open the page, there should be only the image visible without the caption. After a brief moment, the caption should fade in.

How can I adjust this?

Best regards,
zizibe1

Hi Ismael,

Thank you for your reply.

Now, the delay is working, but after the fade-in, the caption disappears completely.

How can I fix this?

Best regards,
zizibe1

Hi Ismael,

Great! I changed the animation-delay value to 0.4s. Now, the animation works as I imagined.

Thank you very much for your efforts and your patience.

Best regards,
zizibe1