Elementor Card Slide Down Animation On Hover
Elementor Card Slide Down Animation On Hover
Hi guys, in this video I’m going to show you how to create this slide effect animation in Elementor. It only takes a couple of minutes to do because I’ve done all the hard work for you, so sit back, relax, hit that like and subscribe button, and let’s get into the video.
How to Set Up Columns for Elementor Animation
Okay guys, the first thing we’re going to do is set up our page, and we do that by clicking on the plus button and clicking on the plus button again and selecting four columns. You can obviously choose as many columns as you like here. Now what you’re going to need to do is go over to my website, which you can find the link for in the description below, and copy this CSS code. Once copied, go back over to your Elementor website and go to the first column of your section.
Configuring Padding for Full-Width Images
In this first column, you’re going to go over to the advanced tab in the top left-hand-side, go down to the section that says padding, and give this grey icon a click. We’re doing this so when we put in our image, it covers the whole column and there’s no gaps around the edge.
Using Custom CSS for Elementor Slide Effects
Now what we’re going to do is go down to custom CSS on the left-hand-side. Remember, if you do want to use custom CSS code within Elementor, you will need Elementor Pro. There is a link for that in the description below. In the custom CSS box on the left-hand-side, we’re going to paste in our CSS code. There isn’t really anything to explain in this bit of code because most of the change user done visually within the style tab in Elementor.
Adding Images for Card Slide Animation
Now I am going to be adding four images to each column, so what I’m going to do is edit each column, go into the advanced tab, and paste the CSS code in each column, remembering to click on the grey link button for the padding on each column. With our code added for each of the four columns, we’re now going to drag in our image widgets, and we do that by clicking on the widget menu icon and just simply dragging and dropping in our image widgets, and as you can see, there’s no spacing around our images.
I have used this code on other websites in the past, and this gives the best visual effect. With our image widgets added, I’m now going to add the images that we’re going to use within this tutorial, and all I’m going to do is choose four random from my media library. Ideally, you’ll want all your images the same height and width, and again this is only just to keep everything uniform and looking the same now with our images added.
Creating Headings for Slide Animation
We’re going to now add our text this could either be a text widget or heading widget for this tutorial I am going to use a heading widget as always to do that we’re going to click on the widget menu icon and drag in our heading widget and I’m going to drop that below our image and you’ll need to repeat this process three more times if your text is going to be the same in every column you can right click in the pencil icon in the top right of your heading widget.
Click on the duplicate button and then drag in each header underneath the image my heading is going to be the same for each column so what I’m going to do is remove these headers and I’m going to leave the first one and once that’s done I’m going to retype in the text that I want to be displayed within our header and all I’m going to do is simply duplicate this header three more times with our headers added.
Applying CSS Classes for Text Slide Animation
We’re now going to have to go back over to my website and underneath our CSS code box is our CSS classes that we need to add to our images and our headers and the first one you’re going to copy is our Text CSS class and you’re going to want to copy this one one first because our images moved down and cover the text now go back over to your website and go into the advanced tab of each heading widget and paste into CSS classes the CSS class that you just copied this will give all your headings an upward slide in animation.
Adding CSS for Image Slide Down Effect
We’re now going to have to go back over to my website, and underneath our CSS code box is our CSS classes that we need to add to our images and our headers, and the first one you’re going to copy is our Text CSS class, and you’re going to want to copy this one first because our images move down and cover the text. Now go back over to your website and go into the advanced tab of each heading widget and paste into CSS classes the CSS class that you just copied. This will give all your headings an upward slide in animation.
If you have found this video useful so far please do hit that like And subscribe button.
Finalizing Image Animation
Once copied you’re going to have to head back over to your website and select each image go into the advanced tab in the top left hand side and in the CSS class paste in the CSS class name on all four Images once you’ve added it to all four you’ll be able to hover over each image and the image will slide down and the text will slide up.
Positioning Text Behind Images in Elementor
Now all we need to do is hide our text behind our image. The CSS code already has the Z indexes set, so all we need to do is select our text, go into the advanced tab, and change our margins. Remember to click on the grey icon in the right-hand-side, and we’re going to have to increase the bottom margin. This is going to move our text underneath our image.
Testing Your Elementor Hover Animation
Now all that’s left to do is repeat this process for the other three headings. Once our CSS class has been added to all of our headings, all that’s left to do is hover over each one and make sure they’re working. This effect also works on mobile devices, but you will have to do a bit of trial and error on setting the margins. What we can do now is preview our page and make sure all the changes that we’ve made have taken effect and look correct.
Using Elementor Pro for Custom CSS Animations
Remember, if you want to be able to use CSS code within Elementor, you will need Elementor Pro. If you haven’t got Elementor Pro, there is a link in the description below. It is an affiliate link; it doesn’t cost you any more to use, but it does give me a very small percentage of Elementor’s profits if you choose to sign up.
If you have found this tutorial useful, please do hit that like and subscribe button, and if you’ve got any questions, come and hit me up in the comments box below. That’s it for this tutorial.
Thanks for watching, and I’ll see you in the next one.
