Create 3 Card Hover Interactions using Oxygen Builder

[Music] hey what's up everyone my name is temara blazis and here's another oxygen builders tutorial in this tutorial we're going to learn how to create three different hover effects and interactions using only oxygen builder we will start with an image scaling effect with changing the background to gradient then an image swapping effect and finally a 3d flip rotation effect so without further ado let's get started so the first thing let's add a section and inside the section i'm going to create a grid of three columns so i'll just drop in an empty div and i'll set the width hundred percent let's make the display grid we want three columns here and the gap 30 pixels and finally i will set the vertical alignment to stretch so all the columns will have the same height okay i will select the parent grid now and i will just add three empty div so as you can see now we have a grid of three columns i will select the first column and let's add the first card i will just add an empty div here i will give it a class of card one i'll go to the advanced size and spacing then i'll set the width to 100 and the minimum height i'm going to give it a minimum height of 600 or maybe 580 pixels just so we can see the content inside this card i will go back to the to the layout and set the overflow to hidden and the position to relative that's it i will go back now to the borders let's make the border radius 10 pixels and the solid let's add a solid border of 4 pixels blue and make the style solid so as you can see now we have a card with a border with a blue border here let's add some content inside this card so i'll just select the card and drop the content in a div i'm gonna give it a class of card content so we can use it on other cards i'll just set the uh the width to 100 and let's give the content some breathing room by just giving a vertical and horizontal padding here then i'll just select the uh the card content and let's just drop in an icon here i'll set its size to 46 and i have custom icon set clothing icon set so i will pick one from this icon set now i'll select the card content and let's add the heading and it's true heading let's set the the size to say 50 or 48 and change the text to something else now let's let's select the card content again and add a text element let's say winter 2022 collection uh that's it now let's select the um the card and change the layout the flex layout to vertical and the whole the vertical alignment to bottom now let's change the color of the card content and here i will show you a very useful keyword to use as a color value which is current color yes current color is a valid color value and it is so useful when you want a certain color to be consistent in an element so let's add the current color value to all the elements here i will select the icon here and in the color field i will just put current color this is the keyword it works like a variable so you can control all the colors of the elements by just changing the parent color and it can be used in other things like the background or the border color not just only the text color so i'll select the heading here the same i'll set the value to current color and the text field i'll set the value to current color so as you can see now if i select the parent color now and go to the typography when i change the the color all the elements inside this parent will have the same color and as i said this is useful not only in the text color so for example if i select the card now and i go to the border here i can give the border the same thing which is the current color see the border talk the same color of the parent text color this is so useful when you want to control elements on hover or you want to change the style of let's say an entire group of elements by just changing the color from one place so i'll just remove this one i don't want i'll return this to blue then i'll go back to the uh to the typography flower card and change the color to this blue so as you can see now we have uh finished uh adding the content to the first card let's add the image to this card i will select the card and let's drop in an image here i will give it a class of card one image then the first thing to do here is i will just pick one from the media library let's say this one and i'll just make the width and height 100 i'll go to the layout and set the position to absolute the top to zero the left to zero and to send this image behind the content i'm gonna give it a -1 z index so it will be behind the text okay let's go back to the custom css and add this custom property which is object fit and let's give it a value of cover just this is just to maintain the aspect ratio of our image now i will go back to the uh this is our image so i will set the initial state the initial state of this image to i will reduce the transparency of this image so uh it will be fairly visible in its initial state so we go to the effects here opacity and reduce the opacity to 0.1 and because we want to animate this this image let's just make a transition here of 0.4 seconds okay so now let's add the hover effect or the the interaction to to this card i will select the card make sure that you select the parent card here so we want to add a hover effect what do i want to achieve here when i hover over this card i want to change the color of the content and i want to add a gradient background here so what to do here i will just select the hover state of our card so on hover i will just go to the typography and change the color here to white then i will go to the background and go down to the gradients here and i will add a gradient color just i will add two colors here the first one is transparent the second one is this dark blue so as you can see now we have a gradient background on hover to our card but i want this gradient not to go from bottom to top i want the gradient to stop in the middle here so i will just add 50 stop point here i want this gradient to end here so i will just add this 50 percent so we'll have this nice and smooth gradient color on hover now i will just uh go to the card again to the states of our card again and i want to target the image now when we hover over this card we want to target the image inside this card so to do this i will just add a custom state i showed this trick in my previous videos so repeat it here again i will just add the state custom state and say one hover space i want to target the card one image plus so what does this mean when we hover over the card we want to change things in this class so i'll just hit okay and what we want to change i want to change the the opacity return to opacity to one and i want to add some zoom or scaling effect so to do this so we'll go to the advanced effects here return the opacity to 1 and go to the transform and add the scaling or zooming effect by just making the scale to 1.1 1.1 here and let's not to forget to add the transition to to our card the initial state of our card so we can see the the smooth a smooth transition here 0.4 so let's save now and if i preview this one so let's hover now and as you can see we have this smooth hover effect interaction between the card and the image so now let's go and add our second card i will go back to the oxygen now i will select the second column here and i'll just drop in an empty div here then i'm going to give it a class of card true let's go to the size and spacing and set the width and height to 100 percent then i'll go back to the layout set the overflow to hidden and the position to relative then i will just add a background let's say a gradient background to this one again i will add two colors here the first one is transparent the second one is this dark blue and again we want to stop the transparency at fifty percent that's it uh one final thing to do here is to uh make the color white and i will go back and make the border radius 10 and just to make things easier i will just right click and copy the content dev here or the content wrapper here i will just select the cartridge and paste the content inside cartoon as you can see it's on the top now i will just select the cartridge and change the flex layout to vertical and the vertical alignment to bottom let's change change the text here to something else let's say fashion and change the icon to something else okay that's it so now let's add the images to the car too i'll just select car 2 and i'm going to drop in an image here i will just pick one from the library and let's give it a class of card true image let's set the width 200 percent and the height to 100 also i'll go to the advanced to the layout and make sure that the position is absolute the top to zero and the left to zero and make sure to send this image behind the content so i will just give it a z index of minus 1 here then finally i will go to the to the custom css and add the object fit property just to maintain the aspect ratio of this image sorry object fit cover make sure that the value is covered here so that's it for the we have added the first image now i will add the second image because we are going to make a swap effect here image swap effect so i will add this uh second image so instead of adding another image with another class and deal with them or manipulate them separately i will just use the same class i will just duplicate this image here with the same class and i'll just go to the media library and pick another image now and as you can see now uh the uh the second image now is above the first because it's the second in order and both of them are using the same class with an absolute position so we have the second image on top of the first image so now i want to target the second image i want to hide this image in its initial state i want to set the opacity to zero and give it like a transform or scale value so we can scale it down on hover when we hover over the card so to do this instead of just giving this uh the second image another class i will just manipulate or i will just manage the same class which is car two image so to target the second image of the same class i will use a very useful pseudo class here or a custom state let's say either custom state or a pseudo class which is the nth of type nth of type this pseudo class or this state will select the elements based on their type okay so in this case we want to pick the second one of this type which is the second image so this pseudo class will will will affect the second image which has the same type in this case the type is image and has a class of car to image if i just hit ok now we can now change things on this image only the second one i'll go to the advanced now from the effects i will reduce the opacity to to zero as you can see it's hidden now and i will go to the transform and add the scale property here or the scale value of the transform and make the transform to 1.2 we want to have this zooming or zooming effect so this is the initial let's say state of the second image the second of its type okay so if i just hit save now i will go back to the to the uh front end nothing can change because we didn't add the hover interaction on the card itself we just added the content we added two images and we hide the second one so i will go back now and select the card make sure that you are selecting the card here selecting the card and from the card we want to change the [Music] we want to control or want to target the second image from the card when we hover over the card so to do this i will add a custom state here which is a pseudo class or custom sudo class so what we want to achieve here so when we hover over the card when we hover over card space we want to target the image actually the image element let's say but which image element we don't we don't have to we don't need to specify the class exactly the class name exactly we can just use the image or the element tag here we want to target the image because inside this cartoon we have only two images so which image do you want to target in this case i want to target the second of its type the second image if if you if you if you use by the way if you use nth child or any others pseudo class it will target all of them because we have other thing other elements inside this cartoon which is the div here so by using info type we are more specific we are just going to choose or target the image with the same type and class so i will just make hover image then the pseudo class will be in of time and i will in the the parenthesis i will just set two that means when we hover over the card we want to target the second image i'll just hit ok so on however when we hover over the card what we want to change in the second image i will just go to the advanced effects here i will return the opacity to one then i will go to the transform and return the scale to 1 also so by just save now i will go to the front end refresh and let's hover now we have this effect without transition because we didn't add transition to the image let's just go to the card image the in the original state or the initial state of the card image and let's go to the effects and add the transition of 0.4 save refresh so as you can see now we have this effect we are targeting on hover we are targeting the second image we want to show the second image when we hover over the card so the idea here is so simple add two images hide one of them in its initial state and when we hover over the the card just reverse the value reverse what you did in its initial state return the opacity to one and return the scale to one that's it and to make this more let's say fancy let's also target the first image on hover let's have this swiping effect more dynamic let's because this the first image is still static when we hover so just to to make it more fancy let's start with the the the first image also so i'll go back to the to the card here make sure that you're selecting the card and from the drop from the states menu here here we have targeted the second one uh on hover uh what to do here i will i will target the image uh in general okay without specifying that i want to target the first one because we have already custom values or custom properties here for the second one so all i have to do here is just to add a state here so when we hover here i will just target the image so i'll make it general i'll just target the the images the in general or that one here here this is more specific for the second image but here i will just target all the images on hover so to to do this by doing this i will affect only the first image because the second image is affected by this state so i'll just hit okay now i'll go to the advanced effects so our reverse i will reverse what i did with the first with the with the second image i will go to the on hover i want to hide the first image and i want to make the scale to 1.2 i reversed what i did with the first with the second image so by doing this i'll just hit save now see now before i refresh now the first image is not moving on hover but now after i refresh you'll see that we have this interaction this call effect like swiping effect between the two images that's it so now let's go back to the oxygen and add our third card i will select the third column here and let's add our third card the third and then our third card we're going to add two images and make a 3d flip let's say flip between the two images in a 3d rotation so to do this i will just select the this one i will add an empty dev and let's give it a class of card 3. i'll go to the advanced size and spacing and set the width and height of the car 3 to 100 percent and from the layout panel i will just add the position relative don't add the overflow because this will affect the 3d rotation of the the images i'll just add the position relative then i will go back and add the most important property here which is perspective property this property will add the depth the in the in the z axis to our cards to flip or to to to make or to do the 3d rotation so this property is perspective this is very important to have this three 3d effect so i'll give a high value here let's say 1000 pixels just to give um let's say enough room for our cards to rotate so i'll go back now and let's add uh two images here or two cards so because the images or the cards here will share a lot of similar properties so i will do the same thing with i did in the first card i will make a general class for uh for the shared properties and i will make two separate classes one is a front face for the front face card and another one is a back face for the back face card so let's add an empty div here and let's give it a class of let's say card 3 cover this class will have all the shared let's say properties between the two the front front face and the back face cards the first thing to do here is i will just go to the layout and set the position to absolute make it uh 0 on the top and left and right and bottom then i will go to the typography and set the color to white because we want the content to have the white color again i'll go to the poster radius make the border radius 10 not to forget to add a transition because you want to make 3d rotation so let's add the transition then finally and the most important property here is to add in the custom css the backface visibility property pack face dash visibility back face visibility and set the back phase visibility to hidden okay what does this mean because uh in css if you uh the the back face of each element is let's say a mirror of the front face so if we rotate an element we will see the mirror of the front face so we want to because we want to see the other one when we hover we want to see a flip or rotation we want to see the second card let's hide the the back face visibility of each one of them so now we will only see the front face of each one of them so that's it this is very important now i have finished the card 3 cover now let's add the back face or the front face and the back face let's start by adding the the front face so by selecting the same card this is the shared class i will add another class to the same one so in this case i will say front face let's say so this front face class will be added to the same element to the same div just to make the different to add the what's different between the front face and the back face so i'll just add this clasp go to the background let's add the uh the first let's say front face this one i'll pick this one make the background cover and i will go down to the gradient here and add two colors the gradient colors or the gradient background transparent make the transparency to stop at fifty percent the color to this dark blue and uh let's just uh select the content here the card content copy and paste it here let's select the front face and from the flex layout make it vertical and the alignment to bottom i don't want this icon here i'll just change the text to something else like new arrivals that's it and let's just make it center that's it cool so this is the front face this is the front face of our card let's add now the pack face so to do this i will just duplicate this one and instead of front face i will just delete this one and add the back face class this is a modifier class to the cartridge cover i will just add the back face class just add this class so what to change here i will just add a different background color uh background emissary make the size cover and again let's add the gradient two colors transparent and this dark blue in this case i want the i want the the gradient to be from bottom to top i don't want to stop this gradient in the middle so we'll keep it like this then by selecting the back face i will go to the flex layout and make it vertical and in the middle i want it in the middle let's just change this one to something else like get 70 percent off your first order just something different so that's it now we have finished adding the two cards but what to do with the second one this is the back face this is the back face card i want to hide this card in each initial state and i will not do like reduce the opacity or make the robot opacity zero or do what i did with the first card no i want to rotate this one rotate it so i can hide this one by the rotation so to do this i'll select the back face here then i will go to the advanced effects and from the transform i will just add the transform property rotate y or the value of the transform property rotate y and i will rotate the back face card to 180 degrees so as you can see now we only see the front face we sent this or we rotate this backface card by 180 in the y-axis so that's it there we go now i will select the card let's select make sure that you select the parent the card 3 so from the card 3 i will target the front face and the back face so what to do the idea here is when i hover over the card 3 i want to rotate the first card the front face i want to rotate it minus 180 degrees and i want to return the the back face to return it back to zero so to do this i will just select car three from the states here i will add custom states just add custom state so when i hover over card three i want to target at first the front face the front face class or the front face element so what to do i will just go back now to the effects transform and i will rotate this one on hover rotating the y axis on over minus 180 degrees okay so now i will make the same thing to the back face i will go to the cards here and i will add custom state to target the back face so when i hover over the card 3 i want to target the pack face so by doing this uh i will just go to the transform now we are targeting the back face and because its initial uh rotation was 180 i will just return return to zero so i'll go back now save refresh so as you can see now we have this amazing 3d rotation between the back face and the front face so as you can see we have created three cards with different hover effects and introductions using only oxygen and without using any third-party plugins or libraries i'm here guys to show you the power of oxygen and what you can achieve with some css knowledge all right so that's it for this video i hope this tutorial will help you build better websites and see on the next one

Channel: Taimur Aziz

Views: 2,009

Keywords: Oxygen Builder, WordPress, CSS, Slider

Id: RqnxcOsCv6s

Length: 31min 45sec (1905 seconds)

Published: Wed Dec 08 2021