Hover Text Reveal in Oxygen Builder - WordPress

[Music] hey everyone welcome to my next tutorial in this one we're gonna create a fun little design here uh using oxygen builder and i'm gonna do this using what i'd call vanilla oxygen builder i don't need any add-ons to do this and we're doing this without using javascript or anything like that so we're just going to be using html and css within oxygen builder what we're going to be doing is making this section right here so i just pulled in some demo data from one of the oxygen sites here and all i'm doing is showing you guys a new way to do this exact type of thing but just a different design so down here you see i have a row of three different things and if i hover over one of them here you're gonna see that my heading goes away and my text reveals and then my icon background changes color on hover and you'll notice that no matter where i hover in here it's doing that i don't have to hover over a specific spot on each one you'll see that works on each one of these so let's go ahead and jump right into oxygen builder and get started on building this out all right so here we are in the background back end of my design here and i'm just gonna add a section right after my featured row here again you can add that wherever you see fit so i'm going to add in a section here and then i'm going to add in a div behind that and then i'm going to add one more div right away let me open up my structure here so we can see what we have here and then to start i'm just going to add one of our items and then we'll duplicate it as we go here so i'm gonna do an icon i'm gonna do a heading and i'm gonna do text and all i'm gonna do is just copy and paste my first one down here all right now that we got that in there i'm going to change my icon on this one and for that we want the bolt on that one and we'll come back and do the the next two in a little bit here we're going to now go through and get it set up so that it's working now i'm not gonna touch any of the design on the actual ids i'm gonna do everything with classes here besides on my actual section so let's go ahead and start with that and work our way down so i'm going to start on my section and we're just going to style this out a little bit i'm going to set it to vertical which it is typically defaulted to i'm going to do center and we're going to give it some spacing as well let's jump over there and add some spacing here you can see this has some default in there i'm just going to change this to um m units so i'm going to do 2.5 m if you click in here again you can do apply all and then i'm just going to take out on the sides here i'm just going to have it lets me do this just .5 all right perfect that way we have a little bit of spacing around there as well and then that should be good for our sections let's move down one more to our next div down and this one we are going to be setting as grid and we're gonna set our column count to three because we're gonna have a total of three things we can change our gap i'm just gonna do ten i don't need a very big gap here and i wanna make sure i stretch my items for the alignment there and then we'll make sure we choose stretch again here all right next i'm going to set some sizing and spacing on this i want to do a width of 90 percent here and i'm gonna set a static height of 250 and you can see that gives us some nice room here next i am going to jump over to the typography part and i'm just going to center so we get everything centered here and you can notice that some of it's not doing that but we'll fix that as we go all right so we should be good on that one as well now and we're going to jump down to our next div and this one i'm going to start by adding in a class so in my case i'm going to add in a class called fab for features advantages and benefits dash cover or hvr for hover and that's what i'm going to do on my main div and from here we are going to set this to horizontal middle and then i want to set a width to 100 percent so that's just going to take up a hundred percent of that one third of our grid area that we have so we're not actually setting this to 33 percent because in our div above it's already dividing this into a third here all right so let's keep moving along here i'm now going to jump over to my layout because i have a few more things i need to do in there we're going to scroll down in there and we're going to set our overflow to hidden and you'll see why we do that in a little bit and then i'm also going to set our position to relative and i don't need to set anything in here all right so that should be everything that we need to do within the div for right now we are gonna come back and do some things to that um in a little bit here but to start out with the class that's gonna be all we need to do at this point now i'm gonna go to my icon and we're going to start styling that and again i'm going to use a class to do all of this the only thing i did within the icon is or the id of the icon is just change what icon i'm using everything else i'm going to be doing from my class so we're going to be following that same thing we're going to do fab dash hvr underscore underscore icon go ahead and hit enter and now we can start styling this so the first thing i'm going to do is we're going to set a color on this and i'm just going to use um this grayish transluce translucent i believe we might have to play with this a little bit to make sure it fits because right now you can't see it but we're going to be putting a background on that my icon size i want to set to 55 and spacing we don't need to do anything and icon style we don't need to do anything so let's go to our background and there we're going to set it to believe we're starting with our green color again you can choose whatever it is that you want there all right so once you have the background on we're going to jump down to our sizing and here we're going to add a little bit of padding in there so i'm just going to use pixels here and do that apply all the way around that just gives us some extra space around here and actually i'm going to go back here and to our primary and i'm going to make this white i think that'll stand out a little bit better than that gray all right perfect so we got that let me jump back in here to my sizing and spacing because there are still some things we need to do i'm going to set my width to 30 percent and that's gonna be because we're gonna want the text and everything else to take up the other remaining seventy percent but i do want a max width of 110 pixels just so it doesn't get too big and i do want a height on here which i'm going to do at 100 and actually it's supposed to be pixels i apologize not um not percentage and then i'm going to have to come back and make sure we center this so that just gives it a little bit more size here right and we may even want to make sure that this is a max width of 100 so it should be a perfect circle then all right so let's jump to our layout and from our layout we can start setting that to be centered so we're going to do flex we're going to choose column and then center and center and you can see that puts it right into the center for us right next we're going to jump down to our effects because we are going to be adding some hover effects here so i just want to make sure that we have a nice transition on that so i'm going to go to transition i'm going to set this to 0.25 and we're going to do ease in out and i'm going to do ease and out for everything um on this just because it's a nice nice timing function and in some cases you can set your css property for this you could just say background color if you only have one it's not necessarily needed but when we get a little bit farther through this i'm going to be adding those in so we'll be consistent and add that there and that should be everything we need to do for the icon at this moment you can see it's not hovering but we're gonna get to that so next we're gonna jump to our heading and this is where we're going to also be adding a class just like we did before fab dash hvr underscore underscore and i'm going to do title and i want to set this to an h3 because we're assuming that we have a section title here which is h2 so i'm going to be using an h3 and in this case i'm going to set my font size to a rem for my default and i think 2.25 was a good size font weight i'll do 600 and let's see here i'm not going to change my color at all i'm just going to leave that and if i jump over to the actual typography it gives us a little more options here let's see if there's anything else we wanted to do in here i like doing upper case it makes it stand out a little bit nicer so we'll do do that but everything else we should be good to go as far as the typography goes so now let's do our sizing and spacing next and here we're going to set a width of 70 so again as i mentioned earlier we want to make sure that this is taking up 70 percent of our space and we're going to set our height to 100 percent and now you can see it's um throwing it off a little bit there so we may need to come back here and set our layout as well all right so let's go ahead and do that jumping to our layout now we can do like we did before do flex i'm gonna do column and center and center and that should center everything for us and next let's see what we have we're going to jump to our effects now and just like we did before we're going to be presetting something so i want to set my opacity to 1 to start here and then we're going to be adding some transition i'm going to do 0.5 this time just because this i want to be a little bit slower as we get scrolling we're going to do ease in out as i mentioned earlier and we want to be setting our css property to opacity and then transform all right so let's go ahead and set our transform now so i'm going to click the back button here and come down to transform and we're going to be setting this so click add transform and we want to translate right now all i'm going to be setting this to is -1 so it's not really going to change at all but i need a value here to bring it back from when we are no longer hovering it i need to have a value in here for it to come back to all right so that should be everything we needed for our title so let's jump over to our text i just want to double check on my other screen to make sure i'm not forgetting anything here and we should be good all right so now let's jump over to the text and here i'm going to again add my class so i'm going to do fab dash hvr underscore underscore text in this i'm going to set my tag here to p and this is going to come into play a little later but just because it's text i want to change that to our paragraph tag i'm not going to change my font size or anything i'm just going to leave that all as standard certainly you can change that as you see fit so let's jump over to the advanced tab i'm going to click on my background and we are going to set our background to white and the reason i'm doing that is as we cover here we want to make sure that we're not seeing our title through there as it translates all right next we're going to go to our sizing and spacing and we're going to set our width to 70 percent again and again you're going to be seeing that it's not quite showing up properly but you will see that um change shortly here and i am gonna add a little bit of spacing to our left side here i'm just gonna do one rum here and that just gives us a little space once um our sizing gets a little bit smaller here all right let's jump down to layout next and here we're going to want to be setting this as absolute for our position and we're going to be setting our right to zero so that just brings it back over to the right here all right perfect next we're going to jump over to our effects and just like we did before we're going to add a few things here so here we're going to take our opacity and we're going to set this to zero so you can see it disappears now and just like we had our title here taking up that 70 percent here so now next i'm gonna go to my transition and we're gonna add that again i'm gonna do 0.5 here in my ease and out and then i'm going to add my properties so again we're going to do opacity and transform just like we did on the title and now i can come over and we're going to add our transform now and this one we are going to be doing a translate again and this one we are going to set to minus 100 and you can see that it's pushing that way up to the top here and you can see as i was not paying attention here i didn't actually fully add my class so we managed to add all of that to our id instead of our text block so what i can do now is if i have this open if i click this little icon right here copies my styles and i can paste them to my class there instead of doing it all on the id so if i come back to my id i can go ahead and just remove everything i just did i know it's kind of a pain in the butt but you want to make sure that you are paying attention and not doing what i just did that's what happens when you are talking and working at the same time my apologies on that i'll just take me a quick second to delete all of this out here right and we should be good there we still are on our p tag now back over to my class you can see everything is still in there that we set all right perfect and you can see nothing's happening when i'm hovering yet but we are going to get there so that should be everything we needed to get our initial items set up and now the fun part is going to be animating this so we get everything moving here when we hover so to do that what i'm going to do is come up to our div that is holding all of these items here and i'm going to be using our state up here and we're going to be adding a custom state and this is where things get a little bit tricky but it's a fun way of being able to animate and create some transitions on things upon hover in our div so we could set a our hover effects on each item but we would have to be hovering over those specific areas in order to do it but by doing it this way that i'm showing you anytime i'm hovering inside this box that is our div container it we're going to get that hover effect so what i'm going to do for my very first one i'm just going to paste this in there so i don't have to type it i'm going to do hover and you can add in the colon beforehand if you don't oxygen does a good job of adding that in for you so i have my hover and then a space and i'm choosing my div which is what an icon is shown as if we looked if we inspected on the front end and then i'm doing end of type one so in this div what it's doing is it's gonna search for the nth of type so div and it's gonna search for the first one so in our case there is only gonna be one now if there is multiple you would want to target the very specific one that you're looking for so let's say you know in our case if i did text instead of our heading i would want to and i if we did not change it to a p tag it would be showing as a div so i would do div number two in this case because i'd have an icon which is showing as a div followed by another div but in our case i set our heading to be a heading so that's showing as a an h3 in our case and then our text i set it as a p tag so that's going to be a p tag instead of a div as well so in our case we have hover which means anytime we hover we're going to target our div which is the nth of type one so we're targeting our first div within this one so i'm going to go ahead and click ok and you can see that adds that in there now let's go ahead and style that out so just pulling that up on my other screen here to make sure i have everything that i want so i'm going to start on my advanced tab and i'm going to choose my background and since we started with their green i'm just gonna transition to our blue color here when we hover so you can see now that when i hover anywhere in this box i'm getting that to change all right perfect and you can go ahead and add in a transition effect you can see that it's already showing for me but i like adding it to both just to make sure i have it so before we did our 0.25 because we want that to be a little bit quicker and we want ease in out and we chose our css property of background color all right so that should be everything we need for our icon that one is very simple to do so let's go ahead and add our next one which is going to be our heading so to do that i'm just going to again click on my state up here and add state and i'm just going to again paste this in here so like i mentioned in my last one we are doing our hover we're targeting our h3 which is our heading or in our case our title that we're showing here and again we're going for the nth of type one because it's our first one that we want to target in inside this div so i'm going to go ahead and click ok you can see i don't have the colon in here but oxygen oxygen automatically adds that in there regardless and because we're just changing our state here you can see that oxygen doesn't change where you're located here so if you need to get back to the main advanced tab or primary tab you can just click on those to get there so let's go ahead and continue to style that out so to start we're going to i believe just go down to our effects and we're going to be adding in a opacity and we change that to zero and we're going to add a transform and this one we are going to set to translate and 100 so a positive 100 which is going to push it down as you can see here all right perfect and you can see our other one's not coming in yet but that's transitioning out nicely all right so let's see what we have next here i believe that's going to be it for that one and it is so let's jump now to our text getting that to work so i'm going to just jump back here so we're at that main advanced tab here i'm going to add my state again and i'm just going to copy that over and this one again i'm doing hover this time i'm using my p tag for paragraph and i'm doing nth of type 1 again now again if you have multiple types of that item within your inside your div that you're using this on you will need to change that number from a 1 to a 2 or so on and so forth but in my case we only have one of each of these so that's why i'm choosing just a one in here every time all right so let's go ahead and get started on this one so we have that selected i'm going to come down to my effects i'm going to start with my opacity and we are going to set that to 1 and then we're going to set our transform and we're gonna set that to translate and this time we are going to bring that to positive one and now if we hover over this you can see that comes into view as we hover which is perfect and you can see we have a little spacing here because as we start to do our responsiveness here you'll see that things start to compact down a little bit more so you can see no matter where i'm hovering inside this div we're getting our hover effect which is very nice and you get you can play around with the speed or if you wanted them to go up you just do the opposite of all the values that i've added for our translate so that concludes each one of these so now all i need to do is just go ahead and duplicate this div two more times and this is where the fun part can be is within my heading you can see as i click out of here or hover on it i'm not going to be able to get to my speed there for my title so i'll start with this here and we'll change that out and i'll come down to this one and i'll get that swapped out and then i'm gonna do my icons right away change this to i believe it was server close enough and let's do our last one which was display i always mess these up as i'm searching for them there we go again the icon in my case doesn't quite matter i'm just trying to show you as an example so i got those swapped out and now the tricky part is getting my title because it's already um moving on me so certainly you can play around with that and potentially set them up beforehand or if you're on a newer version of oxygen or have some of the add-ons you may have the ability to just edit the text over on the left here i know up and coming in oxygen 3.8 when that comes out as a stable version they are going to be adding that to that so it will make it really easy to be able to just edit it over there in these cases so in my case all i'm going to do is on my heading for this one is i'm going to set my um just change up my state here for a moment so under my h3 i am going to come over here click my effects my transform and i'm just going to set that to 1 for now and my opacity i'm going to set to 1. so now you can see that's still there and it should as long as i'm still hovered on that and i might need to change my text there as well so you can see this gets a little tricky as we go through this and what i'll do is i'm just going to pause the recording here get that done and then we'll jump back in all right and we're back so i got those swapped out i didn't want to bore you with well i went through that but you can see that when i hover here now all of these are working and i have my different titles and my different text in there so i'm going to go ahead and click save all right so we got that saved now let's go ahead and take a look on the front and i'm going to hit refresh now and you can see we have this here so now let's go ahead and work on making this responsive so i'm going to jump back over to my builder and again we're going to kind of work our way down so let's start with our section and as we start to play with this and trying our different sizing here you can see that it starts to squeeze together here i'm not gonna actually need to do anything on the section so let's go back up to full size there and we'll move down to our next div and from here we're going to be setting our very first size so our page container here and i'm just going to set this to what we had before at 90 percent i'm just going to set to 100 just so it stretches back out so we get all that room back here next i'm going to drop down to our less than 768 and we're going to make this stack now so again i'm going to choose grid and we're just going to set this to 1 and you can see we do need to change our sizing as well here because what i had done before is set that absolute sizing so i'm going to have to fix that as well so let's scroll back up and go to our sizing and spacing and we'll have to play with this a little bit to see exactly what we need so looks like if we set it to 500 that's enough and you can see everything's fitting in here nicely and still working all right perfect and let's drop down one more size to see how it looks here again you can see that it has enough nice space there we have just our little bit of spacing on the left and right hand side here from when we put that margin in before so i'd say that looks pretty good there so let's jump back up on each size here and see what it looks like again here you can see it's still showing nicely here you can play around with the sizing as you need to the reason i made this a little bit bigger is so that we had room when we get to these smaller sizes for the the text to grow here up and down so that should be good on that div let's take a look and see if we need to do anything else on any of our other sizes here i'm going to say that we're actually looking pretty good here so i'm going to go ahead and hit save and i'm going to bring over another window here which is just going to be in google just because it has a nice mobile inspect tool so all right you can see that's here now and i'm just going to right click inspect and we're going to choose mobile and take a look at this so i'm going to drag that off to a different screen because it doesn't matter here you can see as i'm on here when it's showing is mobile within google you get the mobile touch screen effect so you can see as i hover over these i'm not getting anything happening but if i go ahead and just touch you can see that it creates our hover effect and if i go to my next one does the same thing and if i just click off anywhere it goes back regardless of where i'm clicked here so you can see that looks pretty good and if i choose just responsive here as i make it a little bit bigger here we get get it changing around a little bit still looking like we're on a touch screen here and as we get bigger it continues to grow again so i just wanted to show a quick easy way to make a cool new design that functions a little bit differently i managed to do this all within oxygen builder i didn't need any extra add-ons in order to do this and did not need to know any extra javascript just added a little bit of custom css to target those specific items so that when we're hovering over and again i'll get out of the mobile view here so we can get that hover again and you can see anytime i'm within that main div here i'm getting my hover effect for each one of these so again we did that with that targeting you within oxygen just on our state here using these as i mentioned so just a cool different way to design something and i hope you guys really enjoyed this if you have questions please let me know i'll leave everything i can down in the description as well and thanks for watching and we'll see you guys in the next video

Channel: LocalSBM

Views: 1,091

Keywords: Oxygen Builder, WordPress, Oxygen Builder 3.7, CSS Only Text Reveal, :Hover, CSS Hover, CSS Nth of Type

Id: PncObdc9S0Y

Length: 35min 54sec (2154 seconds)

Published: Thu May 13 2021