Awesome hover section with elementor. No plugin required. Elementor Advanced tutorial- Avro

[Music] hi guys sorry it's been a very long time since my last tutorial so in this tutorial I'll show you some awesome thing I will show you how you can create this type of section as you can see if I hover over to any title the icon and the content is showing also the background images of that particular section is also changing so I will show you how we can create this without any plug-in with some help of CSS and JavaScript so this tutorial will be advanced tutorial and this tutorial will be a longer much longer than my other tutorial as well so let's get started so this is a blank page as you can see that we have a blank page so first of all what we need to do we need to add a section so this will be our main holder section so let's make it full weight and column grab to know web we can also add a class like let's see main box and let's save so this will be our holder within this holder we need to add an inner section so let's add the inner section so in inner section let's add a beam height minimum height up the height you want on this as you can see the default height you want of that particular section so we need I am giving it to 800 okay it's great so let's add a little bit a background color for now so that our wojtek's visible so I am adding this gray color so first of all as you can see we have been icon the title and content first of all so let's make this content position to middle and let's add icon make it left aligned or centered if you want then add the title and Leslie add the content so let's duplicate it and change the color to white color so as you can see this is our content servers just this color to white as well make it 36 pixel font transfer uppercase maybe change it to designed and let's change this icon color as well so as you can see we have icon title and the content so first of all we need to add some CSS class to icon and content because we will add we will initially hide that icon and content and also add some cool animation so let's add some class so I'm giving the class name to icon you can add any classic want I also will add another class so that we could control all of our icon at ons so they our class will be maybe of row underscore height so the reason I am giving this class because we initially hide all of these icons so this will be our class for that and let's select the text and a class of understood text and also the text or content will be hidden initially so let's add that row height class in here as well nice fillers delete this blank columns and duplicate this four times as we will have four columns so if you want five or six column you can do so as well okay looking pretty good so then if you notice if I hover over any title the icon is coming from the top and the text is coming from the bottom so let's add some CSS so that we can initially position the icon to something like in here and the content in here there's some CSS so let's add some CSS for our icons of the class of our icon was offroad - icon so let's add the class of rounders for icon so that will be we will add some top position - - 50 pixels so that the icon will be a little bit of higher than it initial position as you can see if we refresh this one as you can see the icon is now little bit of higher same we will put this content to bottom section here so let's select this row underscore text the class of our content that will be bottom - fifty pixels so the icon will be - 50 pixels on top and the text will be minus 50 pixel on the bottom so let's refer it this as you can see it's now pushed out for this each of these column let's add class as well so for this column there's a day class of maybe off the row box and let's add another class for individual columns for this one there said box one let's copy the class's ceiling and go to this second column let's make it a box box too for this one making box three and this one let's make it Fox 4 let's save it so each of our column has the particular class and a common class as well so now what we need to do is initially we need to hide our icon and the text so let's hide our icon so if we remember we have added a class called over underscore hide so let's target that class to hide everything so others behind so in to hide this element we will use opacity instead of display:none because it will be easier to animate the opacity so let's opacity opacity zero so that won't be visible and we also need to say it position:relative so now if I update this and refresh this base as you can see our you know lowers and the content is now hidden so now what we'll need to do if I hover over to any box that logo and the content must be signals visible so we will add a hopper animation in here so the class of our each of our box was overall hunter scroll box so let's target that class so when we hover over on off row box the off row icon will be visible okay our icon so let's first set the top position to zero so high when we hover to these of row box in the icon position will be down to downgraded from minus 50 pixel 2-0 pixel so let's copy this and apply this same method to our text as well text and let's change this to bottom to zero so how are you over of row box the offeror text will will be 50 pixel up because the initial value was minus 50 pixels okay perfect now as all of our icon and tape has the opto height class so initially it is hidden so here we will have over any particular boxes the particular icon and content needs to be visible so let's take this offshore and rescue box class again and when we prefer a mistake that will be over in here sorry [Music] the when you hover T of row box the over height class needs to be visible so the opacity will be 1 so how do you hover to this afro box that means each of this particular column the icon the content will be visible okay and their position will be changed as well so if we save this and if we refresh and if we have at any particular box as you can see our icon and the content is not visible but it's a little bit jumpy and we don't have any cool animation so as you can see these how nice the animation is so let's add that animation so in a flow underscore height let's add a transition all 0.5 seconds is in out and let's set this and now if I hover over to any particular section as you can see there is a little animation is happening that's perfect so our fastest is is complete so let's jump to the harder and the second step so the second step will be a little bit complicated so stay with me so now we have this animation so how we can add a background image based on our box so if I hover over to a box one the background fast background will be visible if we hover over to the box to the second the background will be visible just like that so what you need to do is we need to add some blank section just top of this mean section so let's just check this inner section in this column so the reason we will use this because we will use this of this section as a placeholder of this background image so as with CSS we cannot just change this background of any particular section or if I can change this background of this main holder it will not load initially when website loads so we will use a different method so let's take a blank section in here just above this main section so if we have four column you need to take five sick blank section if you have three column you have to take four blunt section the reason is if I check this one so if I don't hover over any area there is a default background is visible so fifth section will hold that particular background so that background will be visible already trying okay so there's great so let's add a new section and in this section let's add some class so the first one we may add DC underscore main so this is will be our default background holder so that will be on top and we need to add a common class as well so the common class will be busy maybe underscore box so that will be common class for all of our sections so let's duplicate this one first of all let's set is G index 2 1 there's two placate and rest of them we have to set this Z index to 2 so when we change this background image that will cover the default background image so let's set it to 2 and let's set this change this to be Z 1 let's duplicate since its to be Z 2 and Z in texture - just like that that will be P is 3 and lastly that will be B Z 4 so let's set this and if we refresh our page as you can see nothing changed there's awesome so first of all we need to as you can see each of our section has a common class called busybox so we have to set this background image a way that it covers whole area first of all let's add a default background image so how we can add its default background image so just take this BG underscore main and let's add a background image I have already uploaded five images in here so just I will use this image as the default background so just copy the URL place in here so if we refresh or save and refresh our page as you can see absolutely nothing sure is visible there's because the section is not covering entire area because this each of our section doesn't have any element as each of our section has a common class called PZ under scrub off so let's take DBC under skybox and let's make the position to absolute let's add top position to zero right to zero bottom to zero and left zero so everything will be zero and let's also set these some diagram size and position as well background - sighs let's make it cover position let's make it Center and their self so now if I refer this as you can see the image is visible but the content is just behind under this image so how we can put it back so let's add as a density index of this main section 2 3 so that dollars goes on top of the wallpaper or a background image and we also need to change this background color so make it transparent and we can add a overlay so let's choose overlay of black with 0.5 percent opacity so now if I rephrase this as you can see it's just top of hot background image and working perfectly and if I hover over to this area the animation is also happening perfectly so now our main part is done so for this other section so how we can make a way that if I hover over to the box 1 the background image will be like image 1 if I hover over to this box to how we can change it need to image 2 so by default we cannot use these use only CSS to make that we need a little bit of JavaScript code but before that let's set the CSS for each of this background so our second or first section was be z1 so let's take these CSS [Music] and set the background image just copy from here or be Jemaine paste it in here so for the PC one this will be our background image okay so let's change this with this one so this will be our background image for they don't want same for other as one so let's duplicate it four times so this will be busy 2 3 & 4 and let's change this image as well so for each of our section the background is now set if we defer this as you can see the main background is now not visible because this index of main background was lower than our other section else so let's add some zqt so that if I hover over any box the background changes automatically so how we can do that that is very simple so first of all we need to hide all of this background okay so for this busy box let's turn this opacity to zero because by default it will be hidden every wallpaper should be hidden except the main background so for the main background let's add a opacity to one foot this main pepper just below this PC box okay so each other each and every box opacity will be zero initially only for busy main that will be initially a positive one so that the main image is visible by default and other are hidden as you can see now the main background image is visible so let's add some jqt code that won't be very hard I will provide the code in the description so don't worry so so we need to figure out a way that if I hover over to Box one we will add a class to the first section okay so if I hover over to box 2 we will add a class to a second section same goes for third and fourth so how we can do that that is very easy so let's fast select box one [Music] so box one not over so if I hover to box one these code will run okay what will be the code let's add a function so if I hover over to the box one the background one will have a CSS so we will add this CSS class so if I hover over to box one the background one so the background one is this section as you can see it has a class of busy one so the parallel on will have a class you can name any class I'm giving it in a name of Sean maybe you can beat it anything so if I hover over to box on the busy background one section will have an addition and class called Sean okay great and there's two look at this if I remove our mouse cursor so let's duplicate this line and instead of add class let's make it removed glass so hot it does if I hover over to box on first this class will be added then if I move our mouse outside this box one it will automatically remove our class so these are czars in theory we just need to duplicate it four times nothing else starts wait four times and in this second one let's make it box to be z2 nice for the third one tops three visit three one box for pz4 so we need to add comma in here and the semicolon at the end of each and every security function so let's save this and let's check it so as you can see if I hover over to section actually no absolutely nothing happens but if I inspect the code and hovered in the first area as you can see this code is not changing so that means if I hover over to this first box jQuery is adding a CSS class to this first section so let's do something with that shown class so we have added a class called show so hard this Shana will de do so let's just take this shown class make the opacity to one because all of our box PG box was hidden initially so let us make it opacity one so let's save this so if I hover over to this any of this box as you can see the background image is not changing so that's awesome so but this animation is a very very jumpy as you can see the background image is changing like instantly so we need to add a little animation to the background so how we can do that so you already have a transition animation in here so let's copy this added to PC box one here so now if i refresh this and if I hover as you can see the background also has a cool animation so this is how we can create this type of awesome animation hover animation with element our CSS and some customs jQuery so I hope you guys liked this tutorial and I'm very sorry about my English I hope you all of you understand my in English and if you like this tutorial please do share with your friends and don't forget to subscribe in my channel

Channel: Avro

Views: 41,345

Keywords: elementor tutorial, elementor pro, page builder, Awesome hover section with elementor. No plugin required. Elementor Advanced tutorial- Avro, elementor page builder, wordpress tutorials, elementor advanced, tutorial, hover section, hover effect, show on hover, css, jquery, JS, avro

Id: vXPUpM2fb6Y

Length: 25min 3sec (1503 seconds)

Published: Sat May 11 2019