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:

✅Get code snippet for Cool Card Effect:

✅Get this as Ready Template (✨1 CLICK INSTALL✨):

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.

[iplaystudio]

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

[elijahhan]

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

[olegbesperstov]

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

[Jandruruiz]

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

[srancuric]

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

[lecrafteurvideos]

Hello, great tutorial. Only problem for the mobile version. The transparent header doesn't apply in the same time while scrolling. Is it some margin related problems?
Thanks for all your amazing work.

[Ben-ezmd]

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?

[peteevans]

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.

[alechef]

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

[OspreyHomes]

Thank you so much... for this amazing video I have an issue with mouse hover on mobile device any solution?

[bySterling]

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

[atsvetanova]

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

[Pcmagzine]

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

[phantomsan]

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

[Maniq_]

Who using starter sites for developing website

[UnlimitedElements]

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

[lawenhidayat]

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