Create Image and Button with Hover Effects | Advanced Oxygen Building

in this video we're going to recreate two elements from the website jianggle.dev hi my name is stratos and i'm constantly producing tutorials about wordpress please subscribe to my channel for more videos like this in this series we are re recreating some layouts from other websites using oxygen so you can learn how you can create your own custom elements or custom layouts using html and css so do not go and copy everything that you see in other websites please uh use these tutorials to learn how to use oxygen and then if you go and see something that you like uh make some modification just to make it your own do not go and hard copy everything you see so this is a website that was uh introduced to me by a visitor he asked me if he could create something like that so we're going to copy some of these elements first of all i want to show you the website it's a really nice website a very good website so kudos to the one that designed that and as you can see it has all of those elements and of course it's not something that you can go and copy in 10 or 20 minutes we're going to do a copy of two elements we're going to recreate this element and we're going to recreate this button and maybe in another video going to do some more stuff uh this is not a 40 minutes video it will be less so we're not going to do all the section and of course if you see this section i think it's pretty obvious what you can do this this is a column one column with an image and something that we're going to build and this another column that has here a button or you can just uh add a heading which this is what i would would do a heading with a background and some border radius here is a heading here's a text and here is our two divs side by side with the heading and then a text underneath so all of those are easy and this is the two elements that we're going to recreate today so let's start from the button and then we're going to do that one let's go to the black page that we have let's add here a section okay and i think that's something wrong with my mouse because in some cases i hit and it takes a double click with no reason okay let's open that in a new tab so we have though that page also in a new page okay let's put it here and let's start by uh seeing first what we're going to build as you can see this is a button so you can download the cv and it has an icon here it has some borders as you can see it has all also a hover effect and this hover effect change everything so it changes the icon it changed the background of the icon it changed the outside lanes of the icon and it changed the background of this button as well so please think how you can create something like that i give you one or two seconds so uh what we're going to do is we're going to create one div and this div should contain the download cv and then we're going to create another div for the icon and then we're going to style though that div also and all of that will be in inside a wrapper div and the wrapper div the last rubber div will have also the link so let's start by adding first link wrapper and this is basically a div as you can see here let's click that and open that in the structure okay so we have a link wrapper which link rub is basically a div with the link so inside that we're going to add two divs let's add here one div and let's open that and duplicate that okay and in the link wrapper we're going to put that side by side okay and let's put that in the middle and on the center okay let's go and put all of that in the center and we're going to start building that so first of all i want to grab this particular color because i want to know what color is this so i'm going to right click and i'm going to select the inspect element if you're using google chrome it will be a little bit different i'm using firefox but it's uh pretty much the same as what they do they're looking a little bit different but they are the same for uh what they do so i'm going to hover here and i'm going to click in that and i'm going to find the background color though so this is the background color i'm going to copy that and let's go here and inside the link wrapper for the whole ring wrapper i'm going to add here the background color let's go into advanced let's go into background and here the background color i'm going to put that and also i'm going to do a global color for that which will be the blue okay and i'm going to add that so now that i have that color i can go inside the first div and i can add here a heading which will say download cv download cv if i go here back to this one and select the text i can see that the text is 14 pixels with font weight of 500 and letter spacing 1 pixel so i can put that for the color of course it's white and for the font size is 14 okay now that we have the size let's save that and see how it looks in the front then okay this is what we have created so far it's not the same of course but we're going to get there so then we have to add some padding inside here so i'm going to add inside the div advanced sizing spacing and here for the padding i'm going to go for 10 10 on the bottom 20 and 20. okay let's see how it looks okay so we have something like that next we're going to uh add here the icon so in this div i'm going to add the icon icon okay and the icon is download icon download this one okay and let's put that in solid let's go for let's see it has a background color of white and the blue is the inside color so the background color is white and the color inside is this one okay and let's go for sizing let's go for 25 something like that and space around let's go for five let's see how it looks i think it's less than 25 it's maybe 20 or maybe less let's go for 20 and let's save that and see how it looks in the front end okay so we have something like that and let's put that on top also okay so we need some more padding here we need i think the icon is a little bit smaller okay so uh let's go and check the size of the icon so the font size says 16 okay let's go for 16. okay 16. and then we're going to put some padding and of course i'm not going to check everything because i'm not going to do exactly the same but we'll be pretty close let's go for this div and let's go for a 20. sizing spacing let's go for 20 and 20 for the padding and i think this is way too big ah no it looks okay okay so let's go here for 30 and maybe 30 and then we're going to do a little bit of border radius of 40 pixels something like that but this is for the link wrapper and not just for the div so let's go advanced let's go for border and borders radius let's go for 40. okay it's better now 50 something like that now i think that that 40 that i gave here is way too big what was it the padding 20 so let's go for 15 15 and 15 here okay let's save that and see how it looks okay so now this is a little bit bigger and we may check this to see how it looks and how much space does it have so the width is 46 and the height is 46 but here we have something else that we're counting on and it's not the same with the width we have the space around so let's go and put 10 and we're going to leave it at 10 for the beginning and we're going to see later on how it looks okay after that we have the other color outside is the blue line here when i hover it disappears and it becomes black so we want that it's about five pixels i think so let's go for the icon advanced let's go for a border and we're going to select the color to be this one we're going to select 5 for the width and we're going to put solid here okay so now i think i have it but since i don't have another background i'm not sure so let's go to the div and let's select for that div to have a background color of red and as you can see now that i have the background color of red i can see now that i have the outside with the blue color so i think we're okay with that so let's say delete the color here remove the color let's save that again and now i need to put a little bit of white color outside as you can see here we have a white color outside and this will be the the div so the div will have also a border let's go to the advanced let's go for borders and i will give it two pixels or maybe three we will see it later on solid and then white now since the uh div is a square as you can see it is square so i have to go to border radius and give it about 40 pixels and now i have that line let's say that and see how it looks in the front end and now as you can see we're pretty close to this one and i think we are exactly uh what i'm going to leave it maybe it is a little bit bigger for the white space inside but i'm not going to do that exactly you can play with the settings and do whatever you want right now maybe i will give it okay maybe i will give it a little bit more so let's go for space around to be 12 maybe 12 let's say that it's 12 and we're going to leave it as it is now the second one that we're going to create is this one but we have also to create an effect when we hover it so how we can create that one this is a custom css we cannot do that with what we have in oxygen so for the first one which is just the hover in here i have the link wrapper with the background let's go over the background which is this one and i can change the state to hover and select the background to be black when i hover and then i can go and let's change that to original and once i hover as you can see it changes to black now i need to put a little bit of transition so i'm going to create another class transition and z c on ok and this class should have let's go to effects and as you can see i have already created that one but let's go for 0.4 okay so now when i hover that let's go and save and see how it looks in the front end as you can see when i hover it change to black whatever it does here but here it also change this one when you hover the whole wrapper it also changes this icon so we have also to add something else to change this so we're going to add the new style and let's go to manage let's go to stylesheet and let's go in now the stylesheet which will be download cv cv let's name it how we want it just for us to know which one we're going to edit later on if we want to so that's a bad name because it cannot have a inside uh uh spaces so i'm going to add another style and i'm going to add it download hyphen cv okay cv okay so now we have that download cv stylesheet let's see what we're going to take we want to go first to manage and let's go structure let's go and hit the button and here we want we want to take this link wrapper the id of the link wrapper because we want to set a hover state here so when we hover the whole link wrapper the effect will take place also for the icon so even if we hover the icon or the link wrapper the same thing will happen and this will change colors so we need to have a state in here copy the id and let's go back to the style sheet manage style sheets let's click here and let's put here the id i'm going to leave a space and i'm going to grab the second id that i want so let's click into the icon and let's go and copy the id of the icon go back to the style sheet and paste the id of the icon so now we have the two ids in here if you never have done a css before maybe it will be a little difficult for you so we have to mount the pound because we're handling ids whenever we're handling classes we add a dot whenever we have ids we add a pound whenever we handle html elements we don't add anything this is how css works so here we are going to add also a pound sign and this means that whenever this inside here and i'm going to put here the state hover so this means whenever you hover this something will happen in this id in this element so here we're going to open and close the cr clear curly brackets sorry like this and we're going inside and hit enter twice and whatever we want to put and style this will be inside here so let's go back to the front end and we're going to hit inspect element we're going to hit this icon and we're going to select the let's go for the div this is the fancy icon 2720 2720 let's go here and as you can see this is the fancy icon 2720 this is the id that we have selected so as you can see the border says here border top color is this one so the border top is the blue and when we hover it in here it becomes black okay so here we are going to copy the border right color so we don't have to remember anything this is the easiest thing that i can do for you guys i'm going to leave a little bit of space inside and i'm going to paste that in here i'm going to remove the right because i want that to take place in the whole uh top bottom left and right so we have border color then a semi color and then the color that we want semicolon and then the color that we want that to go and once we hover we can see that this is black so we can put the black html code or type the word black okay and then put a semicolon so sorry this is not a semicolon i think this is okay i don't know what is this sign this is the one that is telling the css that the line is breaking this is the end of the rule and we're going for the next rule so now when i hover here i should see that this is taking place okay the next one will be let's collapse that to see it clearly okay as you can see it's working now the next one will be the line outside the white line which turns into blue so if we go here and we can check the white line as you can see the background color is white this is not the line that i want and the line is not here because it's in the div outside so let's go for the div outside which is the this one and this should have uh its own style so uh leave it for the next one let's go back to the this div and we're going to change the background color okay background color is white so this is white and when we hover it it turns it to blue okay let's copy the blue first copy the uh background color okay let's go here and let's put underneath that a background color semicolon leave a space and then we're going to put the code of the blue what's the code of the blue color this is one okay copy that and let's go back here no here and let's put that and then this uh not the semicolon this is not the semicolon i don't know the name of that so under under after that we can see that this is taking place and then we need a color for the icon and if we go here we will see that this is the color which is blue right now so we need to add also a color color semicolon and then let's go for white because i know that this is white and now if i hover i can see that i have the same effect now i only need the outside line which is another div so i need to copy that and paste it underneath again but now i need to replace this one with the id of the div so let's go back to the sections to the structure and as you can see i can select here let's open the structure and i can select here the div and this div has this id block div block 2420 let's go back to the page okay not the page the style sheet manage style seats global cv and here i'm going to paste the new uh div the div block 2420 and what do i need for from that let's see our inspector let's go for the div which will be the 2420 this is the one 2420 okay and as you can see it has a color of blue i don't want that i want the border color border color is white so the border color is white and it changes to okay so let's go back to the style sheet border color is white and it changes to this blue everything else can be deleted from here and let's see when i hover what it's doing and as i can see it's the same thing right now so let's go here refresh the page and now let's hover and as you can see i have the same effect when i hover but we have here also the last thing that i have to do is as you can see this doesn't have a transition effect and on this turns into the next color a little bit faster so i have to go this is easier i have to go back to my structure i have to go to the div and i have to go and add the transition class and i have to go also to the icon and add the transition class also now if i hover they will all take a little bit of time to turn to the next color so i'm okay with that and now i can end with this one and i can go and start creating the next layout okay beautiful so this is this image that has round corners with the border and there is an icon there and as you can see the icon is on top and when i hover this all change and we have two lines outside here so we're going to recreate that as well i'm going to add another section and in that section i'm going to add a div i'm going to put the div in the center okay and inside that div let's see what we have okay i'm going to add an image add an image add the image and the image let's go and browse that and i have already downloaded the image select the image and this is the image let's go now to the advanced let's go into the borders and for the borders let's go for this color okay solid and let's go for 20 pixels let's save that and see how it looks in the front end yeah i think we're 20 pixels and then we need a little bit of round corners so let's go back here and let's go to the border radius let's go for 40. maybe 50. you can see the the inner pick the inner corner here and you can see the inner corner here it is a little bit more curvy and so i need to go and put a little bit more 50 and i think we're okay with that next we're going to add here another icon so we're in the image we're inside that div so we're going to add here an icon and this is the icon it's down here so let's go to that div and let's put that element horizontal middle and center and let's select that let's put that solid and let's see how it looks okay it's a play icon with the white color for the icon and the blue background so we have a white this is a blue background and the color of the icon is white okay we have the play icon play okay this is the play icon and the size let's go for 30 maybe 20 25 22 23 something like that let's say that and let's see the actual size of the icon 25 okay 25. 25 then we have this background to be a little bit bigger so let's go for space around and let's go for 30. maybe 35 let's see uh it starts from the handle of the backpack to here and here it starts from the handle here i think we are about there okay now that we have this i'm going to save that and i need to create now a line outside and in line outside how can i do that by adding tips around the icon so i'm going to add div wrap that in a div and now that i have that div i can go into advanced i can go into the borders and i can go for a solid with a blue line and maybe one pixel and because it's as you can see here i can go and put a little bit of border radius to 20 no 40. 40. let's save that and see how it looks okay i think it needs a little bit more 50 okay now that you cannot see it i think we're okay let's see how it looks in the front end yeah now it the div is touching the icon so i need to go and put a little bit of padding let's go into the sizing spacing and let's go and put a padding of 5 pixels everywhere so i can have something like that let's save that and see how it looks in the front end okay now i need to see if the space is equal so as you can see the space is around five pixels around five pixels where okay i think maybe it's a little bit more yeah maybe it's a little bit more let's go for uh seven pixels and apply all and also i'm going to duplicate that sorry not that i'm going to wrap it in a div and for that div i'm going to do the same i'm going to advanced i'm going into the sizing and spacing give a little bit of padding 7 pixels to everywhere and then let's go for the borders and let's go for solid let's go for one width let's go for the color this one and let's go and put the borders ready to be 50 okay i think now that i need to go a little bit more so here we are going to also need a little bit more than 50. let's go for 60 and let's go for the previous one to 60 again or 70 maybe because it's a little bit bigger let's go for 60 and maybe we need a little bit more maybe we need 70. something like that let's save that and see how it looks in the front end okay it's good i think it's pretty much the same maybe it has a little bit more space but i'm not going to change anymore and now what i need to do is go for that div and i'm going to put a negative margin so let's go for the outside div and let's go to sizing and spacing and let's go for the margin and put a negative margin off let's see how it's going to do let's go faster and we're going to go for 70 something like that okay 70. now what i need to do is put the lines underneath as you can see and the icon uh above the image so i'm going to go for the image inside here i'm going to go to advanced typography sorry layout there's no typography here that index of one and then we're going for the icon and we're going to put here that index of two so let's go to layout and set the index of 2 for this one let's save that and see how it looks in the front end and as i you can see we have pretty much the same i think it must be a little bit to the left now i think it's going to be a little bit to the left but i'm not going to change it anymore so the next thing that we're going to do is the hover effect and as you can see when i hover this changes which is easy and of course all of those are changing which are easy also because i probably you probably know how to do that now in order to do the same effect to hover these lines and this lines change also this as you can see the image you have to go and put this state to the external uh div to that div so whenever you hover that div this line and everything else whenever you hover here this will change so let's copy that i div okay and let's go to the manage and let's go to style sheets and let's add the style sheet so this is for the image okay and then we're going to paste here the outside element i'm going to leave a space i'm going back to the structure and let's collapse the image i cannot collapse now okay i have to click somewhere and now i need to start from the uh here from the div from that div i don't have to start here but i'm going to start here so i'm going to copy this div okay and let's paste it inside the style sheet let's go into manage style sheets image and here i'm going to paste it next to that so here i have to put the pound sign as we said the pound side also here and here i have to go and put the state to be hover so whenever i hover this i type home okay hover whenever i hover this this will change let's put some curly brackets okay leave a space here enter and this will change let's see uh what is actually everything that we want to change we're going to hit also the inspector element right now and we're going to click inside the outside div which is the block 3520 let's go to the style sheet 35 20 okay work to the correct one and let's go and see where is the color and as you can see this is the border top color so border color let's copy that and let's go here and put border color i'm going to give it a little bit of space i'm going to delete the top so i'm going to put it as border hyphen color semicolon and then black black and then this one okay so whenever i hover that as you can see this turns into black okay i'm going to copy that one more time for the inner div this one and then one more time again which will be the icon and then one more time again for the actual image okay so the second one is for the inner div let's go and see which div is that i'm going to click here and i'm going to open the structure so i know i'm sure about what i'm doing let's click the second div and this is the class of the second div okay which is 32.20 let's open here style sheets okay image and let's paste that here and now if i hover i can see that the second div also turns next is the icon so let's go back to the structure let's go to the icon and i'm going to copy that okay fancy icon 3120 let's go here no i'm always confusing myself let's go to stylesheet let's click image and the third one i'm going to paste here okay and let's save and let's go back here and let's see for the icon itself here the fancy icon 3120 this is not the one that we want so we have a background color and this is the one that is changing the background color from blue to black so we're going to copy that background color and let's go into the style sheet and we're going to change the border color to the background color okay and if i hover now i can see that this is changing also and we're okay and the icon itself stays white and this is easier for me and next we have the border so let's go back here let's go to the structure again and let's go to the image and we're going to copy the border of the the div of the image the id of the image image 30 20. let's go back to the style sheet okay this is the style sheet this is the block that i'm going to replace the id image 30 20. let's go here and let's select the image and see where is the blue color as you can see border top color so we want border color and we have that already border color to be black so when i hover i can see that everything is working fine so let's save that and see how it looks in the front end refresh and hover out and as you can see now everything is looking good let's close that so thanks for watching guys hopefully you enjoyed that please add in the comments below if you want to see something else from another website and i can see what i can do so please subscribe to my channel and i will see you all in the next video bye

Channel: Stratos Tutorials

Views: 1,278

Keywords: Oxygen Tutorials, oxygen Tutorial, Advanced Oxygen Building, Oxygen Advanced building, oxygen advanced layout, oxygen css, oxygen html, oxygen pricing table, how to use oxygen, how to create elements with oxygen, button hover effect, image hover effect

Id: Ce2UAywUq1g

Length: 35min 32sec (2132 seconds)

Published: Sun Feb 21 2021