Change Image Colour On Hover In Elementor
Change Image Colour On Hover In Elementor
Hi guys in this video I’m going to show you how to use grayscale to change the colour of your images on Hover. We’re going to be using Elementor Pro, so sit back, relax, hit that like And subscribe button, and let’s get into the video.
Adding a New Section with Image Widgets
Okay, so the first thing we’re going to do is add a new section to our page, and we do that by clicking on the plus button, and we’re going to select three columns. You can obviously add as many columns as you like. The next thing we’re going to do is add an image widget.
Setting Up Grayscale to Colour and Colour to Grayscale
In this first image widget we’re going to go from Grey to colour, and I’m going to add a second one, and go from colour to Grey, and this will all happen when we hover our Mouse over our images. The next thing we obviously need to do is add our images, and we do that by clicking on the choose image button, and selecting one of these images at random.
Adding Images to the Columns
We’re going to do the same in the second box, and as I say these are at random. I just want something with a bit of colour just so you notice the difference. With our images added you now need to head over to my website where you’ll find the CSS code that makes all the magic happen. As you’ll see when you get to my web page there is the grey to colour CSS code, and underneath there is the colour to grey CSS code.
Copying the Grayscale to Colour CSS Code
Now all you need to do is click on the copy button in the top right hand side of the code box. That doesn’t work for me while I’m in the page builder, so I’m going to highlight the code, click on copy, and I’m going to go into the advanced tab in the image, and scroll down to the bottom where it says custom CSS. All I need to do now is paste in the code. To activate the code, go back over to my website, and underneath the code box you’ll see it says CSS classes, and we need to highlight, and copy the words colorize-on-Hover.
Applying the CSS Class for Grayscale to Colour
Once you’ve done that head back over to your Elementor Page Builder, and you’re going to select on the image that you’ve added your CSS code to, and you’re going to go to the advanced tab at the top. It says layout, and in there it says CSS classes, and this is where you need to paste in that small bit of code. If we hover over our image you’ll see the colour comes through. Now with our second image we’re going to do the opposite. We’re going to hover over it, and it’s going to change to grey.
Copying the Colour to Grayscale CSS Code
So we’re going to have to head back over to my website, and you’ll find the code colour to grey CSS. Copy this, and head back over to the image on your page, go to the advanced tab, scroll down to the bottom where it says custom CSS code, and paste it in. Once that’s done head back over to my website, scroll down to the bottom where it says custom CSS classes, and it says colorize-on-Hover1.
Applying the CSS Class for Colour to Grayscale
Copy this, go back into your web page underneath the advanced tab under layout. It will say CSS classes. Paste it into this box. Now when you hover over the second image it will fade into grey. You do need Elementor Pro to be able to use this effect on your website, and there is a link for that in the top of the description if you don’t already have Elementor Pro. All that’s left to do now is preview our page, and you do that by clicking on the preview button next to the publish button in the bottom left hand side of the screen.
Previewing the Hover Effects
Now when you hover over these images the colour will come through, or it will turn grey. As you’ll notice when you hover over the images it does slowly fade in, and out. To speed this up or slow it down we need to go back into Elementor. If we look at our CSS code it says transition one second, so as you can probably already guess all we need to do is change that number.
Adjusting Transition Speed
For this example all I’m going to do is change this to five, and I’m going to hover over our image again, and you’ll see that it takes five seconds to become full colour. Now I know realistically you won’t want it to take that long to change colour, but you can change it to 0.5 which will make it much quicker. You can also have no number at all which will make it instant, but visually on your final website it does look better if you’ve got a slight fade in, and out even if it is only just 0.5. It looks much more professional.
Elementor Pro Requirement
Remember that you do need Elementor Pro to be able to use these effects on your website. If you haven’t already got Elemental Pro there is a link 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 got any questions feel free to drop them in the comments box below, and before you go.
Don’t forget to check out the rest of my playlists. Don’t forget to hit that like And subscribe button.
I’ll see you in the next Tutorial.
