Thank you very much for your great and clear presentation. Unfortunately, it doesn't work for me. Is it related to the change from section to container ? What is my CSS target then ? Thanks in advance fro your help.
Hello! Very good video. Is it possible to do this but add a horizontal movement effect to the image? As if it were a "video lateral movement" but with an image. I can't find this anywhere and it seems pretty simple. Thank you!!
Update: If someone is going to use this with the containers. Here is the CSS .kenimage { position: relative; overflow: hidden; } .kenimage::before { animation: kenburns 15s infinite linear; } @keyframes kenburns { 0% { transform: scale(1) translate(0, 0); transform-origin: center center; } 50% { transform: scale(1.1) translate(0, 0); transform-origin: center center; } 100% { transform: scale(1) translate(0, 0); transform-origin: center center; } }
This works wonderfully! Thanks! Just one question - When the transition is finished (the image is finished fully zooming in), it reverts back to it's starting position. Is there any way the CSS can be altered to prevent this and leave the image fully zoomed?
I'm still trying to work that one out too. This is where the timing may need to be increased from 20s to 40s, so by that time hopefully the user has moved on...
@@websquadron Yes, I think that would work fine. One thing that I added was a media query around your CSS which will suppress this effect on mobile (it didn't look so great on mobile). I just added - @media (min-width:768px){ ..... all your CSS ... } - Thanks again for this!
If the code is not working as in the video, I think it's because Elementor changed the way how overlays get displayed. For me it works when I change the ".kenimage .elementor-background-overlay {" to ".kenimage::before {" 👋
Hey Web Squadron, very good effect. The code does not work with the conateiners. Can you show how to get the effect when working with containers and not with sections. Thanks you
this is cool but the one problem with this is that many people do actually use a overlay (to darken) a (photograph) in a hero section to place contrast between the photograph and header or text in the foreground.. you can resolve this by placing a overlay in photoshop onto the image before uploading it to elementor, but still.
Thank you! One question: When I applied this and looked at it on a large screen, it has added a gap left and right even though section is set to full width. I went over to advanced and made sure everything was set to "0", (both margin and padding) but that did not fix it. Any thoughts on how to fix that?
@@philippelignac1237 @Web Squadron @Magnus Bylund same issue, same kind of placed image as a background overlay in the section, but... what is /*...*/ for the comments??? Where to add *...*??? And, other question, could be possible that it isn´t working for me because I'm using Chrome????? Thanks for your help guys!
@@websquadron I know a developer who claims to use the UIKit Ken Burns effect and the Advanced Custom Fields Repeater-type field for creating slideshows. Unfortunately, I can't follow his tutorial as he charges a $150 membership fee, but I'm sharing this with you because of your greater knowledge, hoping it might provide you with some insight on how to address the it.
Hi Web Squadron, I used the code and it works Thanks - however, when the image is zooming it also squeezes my header and the header disappears, it only comes back when the image reverse to the original state- any idea how to fix this?
Not only you are thorough, witty, and intelligent, you are wonderfully informative. Thank you, Imran.
Big thanks for making this video request Imran! You’re the man!
No problem 👍
Brilliant solution and presentation.
Cheers :)
Update for flex containers use - .kenimage::before { rest of the css }
Thanks so much Imran, my image or text was jumping, and used your code and it works now.
I have added to slider images it works perfectly thank you.
Thank you!
Thank you very much for your great and clear presentation. Unfortunately, it doesn't work for me. Is it related to the change from section to container ? What is my CSS target then ? Thanks in advance fro your help.
Right click and inspect - that will show you the Class Name. Or use SiteOrigins CSS to help identify it.
Thank you. I would prefer this effect only on mouse over image. How could we achieve this?
So clear and helpful. Thanks so much.
Glad it was helpful!
Hello! Very good video. Is it possible to do this but add a horizontal movement effect to the image? As if it were a "video lateral movement" but with an image. I can't find this anywhere and it seems pretty simple. Thank you!!
I would use the CTA widget maybe?
@@websquadron Do you mean a call to action widget?
@@Pizanlof yup
You could make it be a Cover so the text is over the image
@@websquadron Do you think this has options to give movement to the image? Thank you very much for taking the time to respond! I'll try :)
Amazing. How can I use it with the container? I am facing an issue in finding the right class for it. Can you please guide?
Update: If someone is going to use this with the containers. Here is the CSS
.kenimage {
position: relative;
overflow: hidden;
}
.kenimage::before {
animation: kenburns 15s infinite linear;
}
@keyframes kenburns {
0% {
transform: scale(1) translate(0, 0);
transform-origin: center center;
}
50% {
transform: scale(1.1) translate(0, 0);
transform-origin: center center;
}
100% {
transform: scale(1) translate(0, 0);
transform-origin: center center;
}
}
I just try it out. It's working on containers. 😊
@@Webdevhamzabinzia Ur awesome man, saved me.
This works wonderfully! Thanks! Just one question - When the transition is finished (the image is finished fully zooming in), it reverts back to it's starting position. Is there any way the CSS can be altered to prevent this and leave the image fully zoomed?
I'm still trying to work that one out too. This is where the timing may need to be increased from 20s to 40s, so by that time hopefully the user has moved on...
@@websquadron Yes, I think that would work fine. One thing that I added was a media query around your CSS which will suppress this effect on mobile (it didn't look so great on mobile). I just added - @media (min-width:768px){ ..... all your CSS ... } - Thanks again for this!
Try "animation-fill-mode: forwards;" that should apply the last state of the animation to the element after the animation ran.
If the code is not working as in the video, I think it's because Elementor changed the way how overlays get displayed.
For me it works when I change the ".kenimage .elementor-background-overlay {" to ".kenimage::before {" 👋
Excellent! Thanks
Thank you! ( mine also isn't looping.. any tweak for that? ) =D
THANK YOU SO MUCH!
thanks
Awesome! Thanks
Our pleasure!
Hey Web Squadron, very good effect. The code does not work with the conateiners. Can you show how to get the effect when working with containers and not with sections. Thanks you
I'll need to have a play with an alternate code.
Or how about using the CTA Widget?
Amazing
Thank you! Cheers!
From a site speed perspective is a slide show or overlay lighter in code?
Slides always adds further JS and slowness.
Hi - is there an update as I cant get it to work on current version of Elementor
Everything works as per the video up until when I add the extra CSS text thereafter the KB effect stops
Very good info
Glad it was helpful!
this is cool but the one problem with this is that many people do actually use a overlay (to darken) a (photograph) in a hero section to place contrast between the photograph and header or text in the foreground.. you can resolve this by placing a overlay in photoshop onto the image before uploading it to elementor, but still.
Thank you!
One question: When I applied this and looked at it on a large screen, it has added a gap left and right even though section is set to full width. I went over to advanced and made sure everything was set to "0", (both margin and padding) but that did not fix it.
Any thoughts on how to fix that?
Let me check on that.
Is there a way to do this exact effect with containers yet?
Not tried it yet, but I will.
@@websquadron Hey, have you had time to try it yet?
Hi! Have they made any changes to Elementor since you made this? It´s not working for me? Thanks
Should still work as it’s based on code. Are you using columns or containers?
@@websquadron I am using a section. The section contains a column. The image are placed as a background overlay in the section. Just as you show?
@@magnusbylund make sure you add /*...*/ for the comments
@@philippelignac1237 Thank you very much! This was the issue. It works perfect!
@@philippelignac1237 @Web Squadron @Magnus Bylund same issue, same kind of placed image as a background overlay in the section, but... what is /*...*/ for the comments??? Where to add *...*??? And, other question, could be possible that it isn´t working for me because I'm using Chrome????? Thanks for your help guys!
I would love to learn how to do this in Bricks.
I haven't got the perfect Bricks solution (yet)
@@websquadron I know a developer who claims to use the UIKit Ken Burns effect and the Advanced Custom Fields Repeater-type field for creating slideshows.
Unfortunately, I can't follow his tutorial as he charges a $150 membership fee, but I'm sharing this with you because of your greater knowledge, hoping it might provide you with some insight on how to address the it.
Hi Web Squadron, I used the code and it works Thanks - however, when the image is zooming it also squeezes my header and the header disappears, it only comes back when the image reverse to the original state- any idea how to fix this?
Sorry, I fixed it - Z layer! eh eh
Awesome :)
👍
Not working on my site...Why? :(
I did exactly what you told, same settings and code.
Not sure as I can't see/go in to your site.
Can you make the code able to copy. Can’t copy and paste.
Sorry, you can't copy and paste?
@@websquadron i was able to from desktop… but not my iPad. Lol
Infelizmente isso não funcionou!
Nem direto.
Nem através de CPT do crocoblock.🥺
Have you seen my updated method? ua-cam.com/video/vB_bfvPIjEI/v-deo.htmlfeature=shared