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
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.
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.
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.
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 drop 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.
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.
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.
Once you’ve added the CSS class name to all of the sections you can hover over each one and you can test it with our Tech CSS class names added we’re now going to add the CSS class names to our images and this is what’s going to make our images slide downwards so you’re going to have to head back over to my website and at the bottom of the CSS code copy the image CSS class.
If you have found this video useful so far please do hit that like And subscribe button.
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.
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.
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.
Remember if you want to be able to use CSS code within Elementor you will need Elementor Pro if you haven’t got element Intel 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
