Make this Cool Card Hover Effect with Background Image in Elementor | Creative Stagger Animation

Today, I'll show how to make this Cool Card Hover Effect with Background Image in Elementor and create a Creative Stagger Animation.
✅Get Elementor free version:
makedreamwebsite.com/elementor
✅Get code snippet for Cool Card Effect:
makedreamwebsite.com/make-thi...
✅Get this as Ready Template (✨1 CLICK INSTALL✨):
templatish.com/template/eleme...
In this video, I’ll show you how you can make a beautiful section on your Elementor website. So, when you arrive to there, you can see this beautiful stagger animation. And on hovering those items, you can see the different background for each of them and also can see the white text color. In this way, you can make any service/portfolio/process or any section.
If you want, you can get this background hover effect as ready template from my template shop. Here as a bonus, you'll get both the container and non-container versions. But, if you don't want this templates, you can also start it from scratch.
First, we need to create a 4 column structure. Inside each of the column, we need to add a background image and some texts. Then, we design the cards and add some entrance animations.
Also, let's check the responsiveness of it for the tablet and mobile devices. Above that image, we have add another overlay section. We have make it disappear when we hover text over that image.
Add the custom code to make that creative hover effect 100% perfect! Finally, we make that stagger animation by creating some animation delay for each column's content.
So, that's how you can make this cool image hover effects with text in Elementor/WordPress. If you enjoy this tutorial and want to get more advanced design tricks, don't forget to like and subscribe.

[@Ben-ez5md]

Love the tutorial! I was wondering how do I make the text in the first column dynamic and the "see the details link" go to a specific page for each slide?

[@iplaystudio7482]

On top of these creative developments, you are quite capable of teaching! Thank you for your hard work!

[@MakeDreamWebsite]

Thanks a ton! 😊

[@IamAphenoman]

This is amazing!!

[@MakeDreamWebsite]

Thank you!

[@user-bh4eg5lr7d]

Hi man! Congratulations on your channel! I just found it and Love your content! You deserve great success, I'll be following you! Thanks

[@MakeDreamWebsite]

Thanks a ton!

[@peteevans3489]

Great tutorial! However when I copy the steps, I can still see the top of the background image, around 20px. I cannot get the top container to perfectly cover it. All padding is set to zero. I dont know why it wont work.

[@elijahhan5146]

Instantly bought it even tho I followed the tutorial just because this is too fire and you deserve a 5 star for it! Thumbs up my friend, this is one of your best works so far! Love from Bucharest

[@MakeDreamWebsite]

Thank you so much! Really happy that you liked it!

[@thewebstylist]

Luv this! 🎉

[@MakeDreamWebsite]

Thanks!

[@srancuric7709]

Hello, your tutorials are awesome. Yes but in the future one about custom Mouse Cursors in Elementor. Something with hove mouse effect... Thanks! :)

[@bySterling]

Amazing and beautiful as always bro! Curious if you thumb touch on mobile does it act as mouse hover?

[@MakeDreamWebsite]

Yes it does! You're welcome BTW!

[@AcademicDebate]

Very Very Amazing

[@MakeDreamWebsite]

Thank you so much 😇

[@faisalalibhattifaisalalibh1396]

cool video

[@MakeDreamWebsite]

Thanks!

[@alechef69]

Great video, thanks. A question.. do you have a css code that let a text do a sliding as your box in this video adding a fade in too and where I can control the speed and the 'distance' of the movement? Thanks

[@MakeDreamWebsite]

That requires more JavaScript code...

[@alechef69]

@@MakeDreamWebsite Pity... I wish it was more easy. Anyway thanks

[@phantomsan]

It's possible using hover animation and keyframes. Don't need to use JavaScript...

[@domieSinday]

Of course, I do subscribed! 👍

[@MakeDreamWebsite]

😇🙏🙏

[@domieSinday]

@@MakeDreamWebsite do I need a pro version of elementor to do that custom code?

[@MakeDreamWebsite]

@@domieSinday No, you don't need the pro version. It can be done with Free version only!

[@globetrotterot]

So amazing!

[@MakeDreamWebsite]

Thank you!!😊😊😇😇

[@olegbesperstov7074]

Bro, you are one from the million bloggers who are actually helping people to design the website, but not to advertise some products.

[@MakeDreamWebsite]

Thanks a ton!

[@atsvetanova]

Love tutorial! Can you build "Comming soon" page?

[@MakeDreamWebsite]

Yes, I already made a video on this topic.

[@BGM_Pk]

Please make a tutorial on the pricing table like Fiverr three tab together pricing tab
I request again dear

[@MakeDreamWebsite]

Noted! Thanks for letting me know!

[@phantomsan]

You can save one container setting the image on hover the child container

[@MakeDreamWebsite]

Yes, that can be done. But, in that case you can see a buggy animation with that background image...

[@faisalalibhattifaisalalibh1396]

please create more videos

[@MakeDreamWebsite]

Yes, I'll publish more videos soon...

[@freewebsitetemplates2039]

Who using starter sites for developing website

[@AcademicDebate]

I need Sidebar Heder Please help

[@MakeDreamWebsite]

You can follow that step by step tutorial...

[@AcademicDebate]

@@MakeDreamWebsite I followed your sidebar header video but we could not make it

[@MakeDreamWebsite]

@@AcademicDebate I see... may be something is conflicting.. you can email me your page link... I'll have a look

[@UnlimitedElements]

would you like to create videos for our channel ? (paid)

[@heynaik7732]

[@lawenhidayat8154]

Hello I need your support how I can contact u ,about the templates I bought them but they didn’t work

[@MakeDreamWebsite]

You can email me. I'll have a look! Sorry for the delayed response BTW!