Image Overlay Hover Effects Using Oxygen Builder.

hello and welcome to my channel this is demora blasis and in this tutorial i will be showing you how to create image overlay hover effects using oxygen page builder so as you can see on the screen i've created different overlay effects and i'll start with a fixed overlay a fade overlay effect a slide to top effect a slight to right slide to left and finally cover overlay with a fade effect so without further ado let's get started so the first thing let's add a section then i will add a row of three columns i will select the first column then i will add a link grabber i will give this link rubber a class of card so let's start styling this class i will go to the advanced layout and set the position to relative the display to inline block and the overflow to hidden just to make sure that the content will be clipped inside our link grabber now let's add an image i will pick one from the media library then i'll select my link rubber again our card block again and add a div block inside and i will give it a class of overlay now let's start styling this class i'll go to the advanced to the layout i will set the position to absolute the left to 10 drive to 10 and the bottom to 10. then i will go back to the background i will give it a black background with a 60 percent opacity then i will go back to size and spacing and i'll give it a padding of 15 pixels and apply to all sides now let's add some content to our overlay block i'll select the overlay block and i will add the heading i will change the size to h3 change the content i will give it a name then i will change the color to white i will select the overlay block again and add another heading change the size to h6 i will change the content then i will give it a gray color so as you can see we have created our first card here now let's add some transition to our overlay block okay so i will select the card i'll make sure from the structure panel i'll select make sure that i'm selecting the link rubber our card block then i will hit duplicate component i will drag it to the second column i'll change the image change the name the title so so as you can see we have now the second color now i want to add a fade transition or fade to the overlay block okay so when we hover over the card we want this overlay block to fade okay so the first thing the idea here is to disable or hide this overlay black by setting the opacity to zero then when i hover over the card it will appear again by setting the opacity to one so the first thing to do here i will not work on the overlay class but i will add a modifier class a new class uh to this overlay and i will name it fade i will add a new class this will work as a modifier just to make this fade effect okay so i will add this class fade then i will go to the advanced effects opacity and i will set the opacity to zero so as you can see it disappears now okay so i want to show this block this fade black when i hover over the card so how can i how can i achieve that i can i can do this by adding a custom selector from the uh selectors panel here but i will add it in a different way so when i hover over the card this fade block will uh appear as a fade in a fade effect fade transition so what how can i do this i will add i will select the card component here and i will add the new stage here i will add new state to the cart components it's a bit tricky but it's very useful and that's why i love oxygen page builder because it's so flexible and developer friendly so i will add a new state here and i will write hover space dot fade so this what does this mean this when i hover when i hover over the the card block we will target this fade class okay so i will hit ok now i will go to the advanced to the effects and return the opacity to 1 okay so as you can see now when i hover over the card our overlay block appears again okay one last thing to do here is to add a transition like a smooth transition i will select the uh the or the overlay not the fade i will add i will add the transition to the to the overlay to the main class why because i don't want to repeat this step again and again when because i'm i will make another example so many examples so i will not repeat this process again and again so i will add the transition to the main overlay class i will select the overlay class from here then i will go to the advanced i will go to the effects transition and i will add the duration of 0.3 seconds the timing function to ease and out the thesis properties to animate will be opacity comma and transform y transform because in the next examples i will trans i will animate the transform property so i will add it from now so i will just hit save and go to the front end refresh so this is the first our first uh car card then this is the second car so as you can see one hover chosen hover and fade runs the smooth fade transition okay now let's add uh another example here i will select the first one the first card the first link grabber the first card i will duplicate it then i will drag it to the third column i will change the image to something else and i will take another name with another title so what you want to do in this example we want to hide this overlay block and when we hover over the card we want this overlay block to slide to top it comes from bottom to top so what to do we will do the same thing we did here i will add a modifier class to the overlay okay i will select the overlay block and and here from here i will add a new class a nudifier class and i will name it slide to top slide to top because this is what's going to happen when we hover over the card slide to top okay so we will do the same idea we applied here in the fir in the second example at first we will hide this slide to to top uh block okay class i will we will hide it we will move it down and set the transparency to zero and by uh using the transform property we will push it down then when we hover over the card we wanted to back to top uh with like with a transition so now i will style the slide to top i add a slide to top class to this overlay so i will go to the advanced go to the effects the first thing i will push the it down i will go to the transform i will add new transform property here and i will use translate the translate property will move the block a translate x will not translate it in an x direction we will try we will push it in the y direction push it down so i will change it to 100 percent i will add 100 so as you can see it it pushes down then i will set the opacity to zero at the same time so as you can see it disappeared here okay so we will do the same thing we did in the first example we will select the card our card then we will add a new state okay this state when we hover over the card this state will target will target our slide to top class okay so now we go to the states here i will add new state hover so when we hover over the card we want to target the class which is slide to top okay so when we hover over the card the slide to top we go we will add some properties here we go to the advanced effects we will return the opacity to one then we will go to the transform and return the translate y to zero okay so as you can see now when we hover over the card the overlay block with a slide to top class modifier it will show like this but there is a bug here an oxygen based builder it works fine now in the back end but when i hit save and go to the front end and hit refresh refresh so nothing will happen here it's like there's a problem here and when i inspect this to see what's the problem i will select now the card our card link grabber i will go to the hover i will go to the states here and select hover then i will select the slide to top again and as you can see here as you can see here the transform property is blank i believe that this is a bug in oxygen page builder when you when you sit translate y to zero it seems like there's nothing here so it gives you an empty uh value so i hope that the guys behind oxygen page builder will fix this so what to do to fix this we will add it manually so we will delete this one and go back to the custom css and we will add it manually i will say transform and i will set translate y to zero like this okay i will apply the code collapse save i'll go back to the front end refresh so as you can see now it appears as you can see so we achieved now the fixed block the fixed card overlay the hover the fade transition then the slide to top the rest of examples will will do the same thing okay i will uh select the section and i will add another row of three columns okay now i will duplicate our first card then i will just grab to the first column here okay so let's change the the image to something else then i will change the name and the position now what we want to do here we will uh push this overlay to uh with a negative with a negative value to the left then when we hover over the card we want this overlay to move to or to slide to right slide to the right border okay slide to right when you hover over the the card so we will do the same thing we did in the first examples i will select the overlay here okay then i will add a new modifier class and i will name it slides to rights okay so slide to right now we will do the same thing we will go to the advanced effects i will set the opacity to zero then i will go to the transform and add new transform property translate then i will translate the x axis okay in the x direction what to do to make this hover go far to the left i will give not not 100 percent value but minus 100 value minus 100 percent so this will push will push the bush to the uh to the to the left completely to the left edge okay so this is uh now the normal the normal state of the slide to rights so to to show this uh overlay to slide to right again we will do the same thing i will select the card our card again okay then i will add new state here add state on hover when we hover over the card space dot slide to right so what what what we want to do when we hover over the card we want to target this slide to right class okay so i'll hit okay then i will go to the advanced effects i will return the opacity to to one okay then as you know there's a bug in the transform when we when we set it when we set the value to zero so we will add this manually as we did in the last example we will say the transform translate x this time and i will set it to zero okay i will apply the code collapse the editor so as you can see it's like this it slides to right so let's save and check if this is work fine in the front end yes it works perfect okay again i'll select the first our first card duplicate and i will grab it to the second column and the bottom row okay i will change the image to something else change the name then what we will do we will do the same thing we did in the last example but slide to left here it's a slide to right now we want to slide it to left in this example it slides to right now we will reverse the process okay so we i will select the overlay class here i will add new modifier class which is slide to left we did the slide to right now slide to left okay so the same thing i will go to the effects i will set the opacity to zero then i will go to the transform add new transform property in this case translate we will push this block to the right edge which means pushing it 100 percent of its width so i will set 100 percent so now it's pushed completely uh out of uh to the to the right border now uh the same thing we did in the in the previous examples i will select the card our card our main card again i'll select main card again and i will add new state here add new state when we hover over the card we want to target the slide to left uh block okay i will hit ok then i'll go to the advanced effects i will return the opacity to 1 then i will go to the custom css and make the transform back to 0. transform translate x to zero apply the code collapse so as you can see here now it slides to left to the left border this is slides to the right this is slides to the left save refresh it works perfect now the last example here i will go to the our first card select the link wrapper make a duplication then i will drag this to the our final column here the third column change the image to something else then i will give it a different name now what we want to do here we want to change the overlay the main overlay block okay so uh i don't want the the overlay to be at the bottom i want it to be full to cover the full a block so in this case i will change the main overlay the main overlay block so we will modify some properties here so i will select the overlay now i will go and add new class which is overlay cover okay what to do now i added a new class a completely new class overlay cover what to do i don't want to to to modify or change the main overlay class because it will affect the other elements here or other blocks here so what to do here i will do uh i will copy the styles and paste them on this which is a good feature on oxygen based builder i will go now to the cubby styles to another selector here i will click copy styles another selector then i will select the overlay cover now all the classes of the overlay copied to the overlay cover now we will delete the main overlay we don't need this anymore i will delete and as you can see all the classes applied now to the overlay cover one thing to chain to change here in the overlay cover i will go to the advanced to the layout and i will set also the top to 10 pixels so as you can see now the overlay covers the whole card okay now we want the text and the subtitles to to appear in the center very easy i will go to the primary here and i will set the child elements to appear vertically as a column then i will make the center and the vertical to middle so as you can see uh the text appears in this uh vertically centered okay so now i can add this is the the good the thing in the flexibility in what we did before now i can add all any one of those modifier classes to this overlay okay so when i select this overlay i can add now the fade the fade which is i already did this before so i will add this fade as you can see now it has a fade effect i hit save refresh it has now a fade effect the same thing i can select the overlay and i will remove the fade and add something else like slide slide to to right for example okay save refresh so as you can see now it has slight to right effect so you you actually you can add whatever you want to this overlay to to apply a transition i prefer actually i prefer the fade one the first one the fade so i will delete the slide to right and add fade the fade one save refresh so as you can see it fades now with a full cover that's it for this tutorial we created a fixed overlay a fade slide to top slide to right slide to left then finally a cover overlay with a fade effect so i hope you like this tutorial if you like this kind of content please like and share so i can add more videos thank you

Channel: Taimur Aziz

Views: 5,636

Keywords: WordPress, #Oxygen, Oxygen Page Builder

Id: bZ3_yPxodzo

Length: 24min 40sec (1480 seconds)

Published: Sat Feb 20 2021