Hover Text to Change Image using Elementor | WordPress Elementor Pro Tutorial | Elementor Tricks

[Music] hey what's going on guys my name is jim fahad in this tutorial i'm going to show you how to create this beautiful hoover text to change image option using elementor page builder so here on the left if we hover over on the text on the right we see the images are changing this is really a great effect you can use it on different places the way you want and i will also show you how to make it mobile responsive so it would look really great on mobile device alright so without further ado let's now go inside elementor page builder to take a new section let's click on this red plus icon and here i'm taking this two column structure now first i'm making its height to minimum height and let's make its height to 100 v h let's now give it a background color from here so i'm making its background color to hash f9 f9 f9 then i want to add some spacing so from under advanced tab i'm adding 25 pixels of padding now the first thing i want to make their proportion to 40 60 or something close to that so here i'm dragging the column let's make the left one to nearer 40 percent and the right one to close to 60 percent like this now here inside this middle column click on this plus icon and here i'm dragging a text editor widget now here i'm pasting some dummy text so basically it's a paragraph text and here this message text this is a heading 3 all right now let's add some spacing with it so go under advanced tab first let's unbind the margin and only at the bottom i'm adding 10 pixel of margin also let's add 10 pixel of padding with it but on the right side okay so let's first unbind it on the right side i'm adding 25 pixel and on the left let's add 30 pixels of padding now i want to add some hover effect with this text editor so to do it from under advanced tab let's open the background and go to the hover tab here i'm setting the background type to classic and layers at the background color hash dfff5f then from here i'm adding transition duration to 0.5 second now when you hover over on it you see there is a beautiful background color also i wanna add a border on the left side here so to do it from here open the border again go under hover now let's make the border type to solid first i'm unlinking the width because i want to add the border only on the left side so on the left side i'm adding 4 pixel of border and let's make the border color to hash 002 f a7 now if we hover over on it we can see the border at the left but right now it's not smooth you see it's like something jumping here on the left so to avoid it we need to do here two things first i want to add some transition duration so here i'm adding the transition duration to 0.5 and also you see this is the hover state on the normal state we also need to add the border so from here border type to solid border width and bind it only on the left side for pixel but this time we need to make the color to very transparent color like this now if we hover over on it you see it's performing very smoothly all right now i just want to simply duplicate it couple more time so let's duplicate this text editor also let's duplicate it one more time now let's change these texts again i'm pasting here some dummy text i just want to make this video text to uh heading 3 now let's change its text let's paste the text and make the phone text to heading 3 perfect so hoover effects are also working perfectly all right now inside this right column click on this plus icon and here i'm dragging an image widget so let's select the image i'm selecting this image now click on insert media now the first thing i want to add some spacing all around this image so for that i'm selecting this column go under its advanced tab i'm adding here 10 pixel of padding but on the left i want to add more so unbind it and on the left i'm adding 50 pixel of padding all right now i wanna add that cool hover effect i mean whenever we will hover over on this message here we'll appear this image when we will hopefully for on this video here we'll appear another image when we will hover on this phone this text editor here another image will appear so from now please be very careful because you need to apply exactly what i'm doing here now the very first thing let's first select this image go under its advanced tab now here i want to add some entrance animation so from here select the motion effects from here in french animation i'm selecting fading option and then open the advanced option and here i will be adding some class name so first i'm adding the class name all dash image remember you need to write the class name exactly like this all dash image then here i'm putting a space because here i wanna add another class name that would be image dash one all right now i just wanna simply duplicate this image couple more time so let's just duplicate it and duplicate it one more time so right now we have three images one two and three so here the first image let's select it and from under advanced tab we can see its class name is all image and then another class name that's image dash one so let's now select the second image go under its advanced tab for the second one we will keep the same class name all image but the second class name here instead of image one i'm making it image two and for the third image this one go under its advanced tab keep the all image class name but here instead of image one i'm making it image three all right and also we can simply change the second and third image so select the second image go to content and from here i'm selecting this image for the second one and for the third one go to content let's select the image i'm selecting this image click on insert media all right now my goal is i will just keep one image at a time and other image will be hidden so to do it let's just select this main section click on these six dots from under its advanced tab let's now open the custom css field by the way custom css is only available on elementor pro i will put my elementor pro affiliate link in the description if you purchase elementor pro through my affiliate link you don't have to pay any extra but i will get a little credit for that that will help me to continue this youtube channel and make more interesting tutorials like this now inside this css field you can just simply write down the css code or you can just go to jimfahreddigital.com i will put this pages link in the description from that page if you scroll down a bit here you can see initial image show or hide css from here just copy this css snippet go inside elementor and paste the css snippet here so now you see you can only see the image one the second and third image we cannot see that because here if we have a look inside the css snippet you see we have set the all image that's the common class i made the display to none and only the image one that's basically the first image i made its display to block so here instead of image one if i put image two here we can see the image too if i write here image 3 we can see only the image 3 here but initially i want to put here image 1 then when we hover over on the video this text editor the second image will appear on the right side when we will hover over on this third text the third image will appear on the right side and we will be doing that dynamically by using some simple javascript snippet so first of all let's select this first text editor click on its pencil icon now from under its advanced tab let's scroll down and open the attributes option so this is basically the custom attribute option if you are familiar with html then you know on html we usually add custom attributes like key then equal then the value name but on the element or the syntax is a bit different here first we need to put the key name then a pipe icon then the value again we can just simply go to gym for thedigital.com from here if you scroll down you can see text data attribute simply just copy this snippet from here go inside elementor now inside these custom attributes paste the snippet here now remember we have selected this first text editor that's why we have put here image one so for now let's just copy this attribute and select the second text editor go under its advanced tab and open the attributes now paste the snippet here but here instead of image one i wanna put here image two because whenever we will hover over on this text editor image two will appear on the right side i hope you get the idea let's now select the third one go under its advanced tab open the attributes here paste the snippet and instead of image 1 i'm making it image 3. now we need to do the very last thing that we need to just insert the javascript snippet so first of all let's click here on this rubik's cube icon and here i'm searching for html widget this is the html widget we can insert this html widget anywhere of this page because this html widget only be shown inside elementor page builder but on the real website we can not see the html code so for now i can just put the html code inside here let's drag this html widget here now again we can go to jim gymifydigital.com and here under the dynamic images hide or show js let's just copy the javascript snippet from here go inside elementor and inside the html snippet i mean html editor paste the javascript snippet here and if you wonder this is a very simple javascript snippet let me just make the editor a bit big so you can see when we will hover over on this text editors like this three first it would make all the images that has the common name all image all those images will be hidden and only the image that has the same custom attribute name with this text editor the image will be shown on the right side it's very easy and plain javascript code alright so we are done with the javascript code embedding but still if we hover over on this text editor we can see the images are not changing on the right side and it should be because it won't work inside elementor page builder so for now just click on this green update button to save your work and click on this eyeball icon to preview it on the real website now have a look if we hover over on the second text editor here on the right side we can see the image 2 and if we hover over on the third text editor we can see the image 3 on the right side it's working now perfectly and the effects are really super smooth all right it's looking great on desktop right now but you know on the mobile device there is no hoover option so for the mobile device i wanna make its layout a bit differently okay so let's first go inside elementor page builder now first i wanna check its responsiveness so from here click on this responsive mode icon on the desktop it's already looking great now first let's have a look how it's looking on tablet device so on tablet device it's looking great but i think we can adjust its spacing a bit so select the text editor go under its advanced tab from here i'm making its padding to 10 pixel but only on the left side so first unbind it i'm adding 25 pixel let's do the same with this text editor so select it from under advanced tab add 10 pixel of padding and only on the left let's add 25 pixel same with the third one here i'm adding 10 pixels of padding oops 10 pixel and on the left i'm adding 25 pixel otherwise everything is looking great on tablet device now let's go inside the mobile device here so on mobile device if we keep it like this it won't be a wise decision because if someone click on not click if someone hover on message they cannot see anything at the below because i'm not sure what's the height of that user's mobile device so i want to make the layout in a different way for mobile device first of all i wanna make this whole column hidden on mobile device so first select this column from under advanced tab open the responsive i wanna only show it desktop and tablet but i wanna hide it on mobile device okay now let's work with the text editor select the first one first of all i wanna make all the margin to zero and all the padding to zero then i wanna also remove this left border from mobile device so from here open the border only on mobile device i'm making it 0 also on hover let's make it 0. so let's do the same with this one first making the margin 0 padding 0 go to border from here make the width 0 also on hover make the border width to zero same with the third text heater make its padding and margin to zero then their border make the normal border width to zero and hoover border with to zero okay now under this first text editor from here click on this rubik's cube icon i wanna put an image widget after it here for the first one i'm selecting the first image this one click on insert media okay first do a bit spacing stuff with it go under advanced tab let's add 20 pixel padding at the bottom only and i wanna also add some border so from here border type to solid and it would be only bottom border so unbind it only on bottom i'm adding one pixel of border and let's make its color nearly white because i want to use it to make it as very light divider so right now if we minimize the bar here we can see it's a very light divider here at the bottom all right let's now open it now you know we only want to see this image on the mobile device but on the tablet and desktop this image won't be shown so select it and from here open the responsive i wanna hide it on desktop also on the tablet now we can simply just duplicate this image and here i'm dragging this image underneath this video here and let's change this image let's select this image and again i'm duplicating this one and then i'm dragging this one under the phone text the third text here also let's change this image i'm selecting this one click on insert media so on the mobile device they are looking great right now and on the tablet device on the tablet device they are looking great but don't get confused with these images you see we have hidden these images on the tablet device that's why they are looking like this watermarked image these are showing only inside elementor page builder but on real tablet device these images won't be shown same for the desktop device you can see these images i have hidden those on the desktop on the real desktop these images won't be shown if you don't believe my word i'm showing you it in real so first to save it click on this green update button now click on this eyeball icon to preview it on real website right now you see there is no images in between these text on the left and the hoover are working perfectly also if we see it on the mobile device on the real mobile device they will look like this so right now they are looking great on mobile device tablet device also on the desktop device i hope you have learned something new today if you like it please give this video a big thumb up and don't forget to subscribe this youtube channel also press on that notification bell icon to get notified before anyone whenever i will upload a new video on this youtube channel also if you want me to help you on your wordpress project or elementor project then you can contact me through my website that's jim fahad the digital.com i will try my best to help you personally once again thank you so much for watching this full tutorial i will see you on the next video for now bye bye

Channel: Jim Fahad Digital

Views: 15,086

Keywords: Hover Text to Change Image using Elementor, WordPress Elementor Pro Tutorial, Elementor Tricks, elementor tips and tricks, Elementor Tips & Tricks, Change Image on Button Hover in Elementor, Elementor Show Hide on Hover, Elementor Show Image on Hover, Elementor Show Hide Image, Elementor Image Show Hide, Jim fahad Digital, Elementor CSS Tricks, Elementor Custom Css, elementor tutorial, elementor pro, elementor, WordPress, Elementor Wordpress, Web Learners, Livingwithpixels

Id: Ja8HuMZ0vR4

Length: 17min 20sec (1040 seconds)

Published: Sat Nov 20 2021