Portfolio Image Auto Scroll Effect Elementor FlexBox Containers
Hi guys in this Tutorial I’m going to show you how to auto scroll on Hover using Elementor containers I’ll also be showing you how to take full length screenshots of your website it’s extremely easy to do so sit back relax hit that like And subscribe button and let’s get into the Tutorial.
Okay so the first thing we need to do is click on the pink plus icon in the middle of the screen and add our container and I’m going to select the one with four sections you can obviously select one that best suits your project.
Now what I’m going to do is go to the first section and add a background image to it and this background image is going to be a full length screenshot of our website and to get that full length screenshot I’m going to be using the Chrome extension go for page this is a free and simple extension for Chrome users that you can download onto your browser.
So what I’m going to do now is head over to my website and take that full length screenshot once you have got Go full page installed onto your Chrome browser all you need to do is click on the jigsaw extension icon and select it within the extensions it will automatically scroll down your page and take the screenshots it will automatically arrange those screenshots into one image and all you need to do is click on the download button.
If it is the first time you’re using the extension you will need to allow permission for it to download and save onto your computer if you want to see a full tutorial on how to use go for page there will be a link in the top right hand side of your screen now that we’ve got our background image we’re going to head back over to Elementor and inside our first container we’re going to right click and select edit container now in the menu on the left hand side.
We’re going to click on the style tab under background we’re going to click on the pencil icon which says classic which allowed an image box that we can upload our background to select choose image and it will bring up your WordPress media library from here select your background image and click on select in the bottom right hand side of the screen as you can see our background image has been loaded into our first container but it doesn’t quite fit.
we’re going to change that now and the first thing we’re going to do on the left hand side is Select display size and in the drop down menu select cover now what we need to do is go up to repeat and click on the drop down menu and this time we’re going to select no repeat as you can see our background image fits the width of our container but obviously not the height so we can start correcting this we’re going to click on the plus button in the middle of our container.
What I’m going to do now is drag in an image widget from our menu and the image I’m going to add is a border of a mobile phone so I’m going to select it from our media library and click on select in the bottom right hand side of the screen if you want to be able to use phone images like this one on your website there is a link in the top right hand side.
To show you where you can get them from and they are completely free to download and use on your website if you are finding this Tutorial useful so far please do hit that like And subscribe button and notification Bell for future Tutorials as you can see our background image has stretched to the full height of our phone image but it doesn’t quite fit inside the phone and this is what we’re going to start to correct now.
So what we need to do is click on the advanced tab in the top left hand side of our screen and underneath where it says layout it says margin and this is what we’re going to have to change to make sure our background image fits within our mobile phone what we first need to do is unlink our margins.
To do that we need to click on the grey link icon next to where it says margins now it’s just a simple case of adjusting our margins to make sure our background image fits with inside our mobile phone image this can be a little bit time consuming but you will also need to preview your page multiple times to make sure the final effect looks right now that our background image is in place we’re going to add a CSS code that makes it scroll automatically on Hover.
Remember if you do want to add CSS code to your Elementor website you will need Elementor Pro there is a link there in the description below.
To find the hover effects CSS code you’ll need to head over to my website which you can find the link for in the description below scroll down to the bottom of the page and you’ll see the CSS code that you can click on the copy button on the top right hand side of the box now you’re going to need to head back over to your Elementor web page builder and what you’re going to need to do is click on the little grey box in the top left hand side of your container.
This will allow you to edit your container so you need to go into the advanced tab scroll to the bottom click on custom CSS and paste in your CSS code once you’ve done that we can collapse our menu and preview our page and make sure our code is working to do that all we need to do is hover over our image and as you can see it automatically Scrolls down and when we stop hovering over our image it Scrolls back up to the top.
As this is scrolling slowed for me I’m going to show you within the CSS code how to speed it up so what we need to do is open our menu again and as you’ll see within the CSS code it says in out 4S we’re going to change this from 4 to 2 and 2 lines down it also says 4S and we’re going to change this as well to two now if we hover over our image you’ll see that it Scrolls up and down faster now that everything’s working on the desktop version we’re going to check its responsiveness on a tablet.
Within the tablet mode we will need to go into the advanced Tab and start changing our margins to make sure our background fits our image remember that you will have to unlink the margins before you start making any more changes otherwise it will change the work we’ve already done on our desktop version and finally once we finish with our tablet version we can go and click on the responsiveness for the mobile phone and start making the additional changes there.
So there you have it that’s how you can add a scroll effect on Hover Within Elementor remember if you do want to add CSS code within Elementor you will need Elementor Pro there is a link for this in the description below 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 the notifications Bell for future Tutorials and if you’ve got any questions feel free to drop them in the comments box below on my blog or come and find me on social media all those links are listed in the description below that’s it for this Tutorial.
Thanks for watching and I’ll see you in the next one.
