Projects Page with an Image Reveal Effect Using Oxygen Builder.

hello this is temur abdulaziz and this is another oxygen builder tutorial at first i would like to thank you so much for the positive comments and likes i received on my first video whether here on youtube or on facebook believe me this makes me so motivated to do my best and to create more content so without further ado let's get started on this tutorial so as you can see on the screen here i have designed a project listing page on adobe xd so it has this title and subtitle and the project list here with the project type and the name of the project what i want to achieve from this tutorial is to has an image reveal effect whenever i hover over this project so if i hit play here just to see the design when i hover over this i want the image the project image tool to fade or to has an image reveal effect like this so let's go to oxygen builder and try to build this together so before i start designing my projects page i've created a custom bus type for my projects using the custom bus type ui and i've added a project type taxonomy added some content here like architecture housing and interior then i added some demo projects here actually nothing fancy here just a title with a text a project type a featured image and that's it this is enough for the purpose of this tutorial so i will go to my pages i will add new page i will name it projects publish then i will start designing my page using oxygen page builder now before i start adding elements to the page i have designed the the the projects page in adobe xd as you can see here and i have some information some style information like the colors and the the the fonts i've already added those colors and the fonts to oxygen before i start recording this tutorial so if i go to the settings here i will go to the global styles the colors i have added the colors from the design file and also i have added the fonts here the sinzel font and the multirot font so now let's start designing our page the first thing to do here is to change the body background so as you can see in the design here we have a dark black background so i have to change this background the background of the body and unfortunately there is no way uh an oxygen based builder to select the base or the basic html element and style them so we have to add the body as a selector i will add a selector here for the body and i will change the background here to the body background okay we have now this dark background now let's add the background and i don't know if you may have noticed that there is a lines background with the design there's some lines here as a background if i hit review preview here you can see that there is a lines here as a background and it gives a very nice and cool effect to the background of the page so uh of course you can add this background as an svg image but in this tutorial i will show you how to make uh this lines background with only css so back to uh to our website now on the first thing to do here is to add a div element and this div element will be like the rubber for the lines i will give it a name of lines wrapper okay then i want this div to be fixed the position of this div to be fixed in the background so i will go to the advanced then to the layout and i will set the position to fixed okay then i will go back to the size and spacing and give it a width of 90 and a height of 100 percent so as you can see now it's 90 of the of the page width and a hundred percent in the height uh and to i want it to be centered so to center a fixed position element you have to do two things the first thing is to set the margin the left and right margin to auto and the second thing to go to the layout and set the left and right to zero now as you can see it's centered our fixed position element or div is perfectly centered so one last thing to do here is to set the zit or the z index to minus 1 to a minus a value or negative value why because i want this background to be below the content so i don't want this fixed position div or this div to interfere with the content the base content so we put it in a lower level uh by giving it a minus value to the z index now let's add the lines to this wrapper uh the first thing i was selected then i will add a div element i will give it a class of line then the first thing i will give it a width of one pixel then the background color i will give it a white and i will reduce the transparency to a very low value like i seven is fine i believe then i will go to the size and spacing and give it a height of 100 so as you can see here this is the line but uh why it's a bit wide while we are giving it a one pixel with that's because of the developers of oxygen builder they give a predefined width to the to any empty div so you can select it easily in the editor so how to overcome this we want exactly one pixel here in the editor one pixel of line how to override this i will select this empty div and add a new state here okay this state will be the empty state so when this div is empty i want to set a minimum width of one pixel so this way we have overcome the um the default minimum width of the empty uh depths in the in the editor so if i hit save now let me check now on the front end so as you can see here we have this line in the background now what to do here just to duplicate this line multiple times like five times one two three four five and as you can see the the the lines are stacked over each other so we have to select the lines rubber and change the uh the layout to horizontal and set the horizontal alignment to space between so this way we have this lines background i will hit save and refresh the background now works perfectly so that's it for the uh for the for the lions background it's an amazing technique uh and now what we want to do here is to we don't want those lines to distract us while we are designing so i will just hide them in the editor right now for for now just to continue designing the page even if i hit save now and refresh nothing changed in the front end just in the back end i set the lines rubber to hidden just to continue designing without any destruction now let let's continue doing this so let's back to the design we have this beige title and we have a subtitle here and we have the project listing let's start by adding a section here then i will add a heading this heading will be the the page title projects i will give it a color the gold color then i'll set the 290 and the font weight to 400 i'll go to the typography and make it uppercase fine now i will add another text here this is the subheading or subtitle i will select it set the color to white and the font size to 22 and the font weight to something like 300 is fine so that's it now to add uh the the list of our projects we are going to use a repeater we are going to display the projects from our custom boss type so while selecting this section i will add a repeater here then the first thing here is to tell this repeater from where to retrieve the posts so i will go to query then custom then post type then i will select the project's post type then i will add a margin top margin i will go to the advanced size and spacing and i will add 120 pixels as a top margin the last thing to do here is i want to work on the single mode not the normal mode because the normal mode will retrieve all the pauses i want to focus on only one item or one post at time so i will select the single mode here let's add items to our repeater i will select the repeater here and i will add a div i will give it a class of project item then i will set the width to 100 the background color to the projects background and i will give it a padding of 40 pixels apply to all then i will go to the layout and make sure that the position is relative um that's it uh one last thing which is the border we have a golden boulder border here so i have to add a border i will go to the borders i will select the left then uh the golden color will give it two pixels a solid that's it so now i will add the first element inside this project item which is the project type here so i'll select this class or this block and i will add a text block here double click and i will insert data it's uh taxonomy so i will select the taxonomy here from the taxonomy list i would select the project types insert done so as you can see it shows now the the project type i will give it a class of project type uh i will set the uh the font weight to 500 i guess then the letter spacing to one pixel and the transform text transform to uppercase that's it for the project type then also let's select the project item again and add the project title the project title i will add and add text block double click this text block and insert data which is the post title insert done as you can see it retrieves the boss title or the project title i will give it a class of project title i will set the font family to the display font and the text color to white the font size to 32 uh i guess that's it i will give it a top margin size and spacing i will go to the margin here and give the top margin of 15 pixels i believe that's it i guess that's it for the title now i will add the the image the image block or the image div here so i'll select the project item then i will add the div block here i will give it a class of project image i will set the width of this project image to 40 then at first i will before continuing uh styling this class i will add the image inside here i will add the image add image then i will retrieve the image from the dynamic data featured images insert so as you can see it shows the the image of the project now i will go back to the project image block or the class and continue styling this i will set the position to absolute now to move it to the right go to the layout to the position select absolute i will set the right to 50 pixels and what to do here to make sure that this image will align vertically with this project item with this box with this block regardless of its height we want to make sure that it will be vertically aligned i will do this trick here i will select the image the project image class or the block then the first thing to do here is to set the top to 50 percent which is 50 of this block we will push it down to 50 percent of this block which is the project item then i will move it up 50 percent of its height of the image's height of the image height this way we will make sure that the image will vertically align um with the this box or this image item block okay so what to do here i will change this to a percent and i will push it down to 50 percent 50 percent of this height so as you can see this is 50 percent of the height of this box now i will move it up 50 percent of of the image height how to do this i will go back to the effects i will go to the transform i'll add transform translate and i will move it up 50 percent to move it up you have to give a negative value so by giving negative 50 the image will move 50 percent of its height so now uh the image will be vertically aligned with this box which will give a very nice presentation so now we want to add this hover effect image reveal effect on hover so what to do uh i will hide this image i will select the the image the project image class okay then i will go to the advanced i will go to the effects and i will set the opacity to zero as you can see now so to show this image again what to do i will select the um the project item this parent the parent the project item okay and i will add a state here to target this image this project image okay so after i select the project item i will go to the state here add state i will add the hover state here hover i will write hover then i will add space then dot project item so this means when i hover the sorry not project item project image so this means when i hover the project item i want to change things in the project image class okay so i will hit ok then what to do here now i will go to the advanced effects opacity and return the opacity to one so as you can see when i hover now the the project image shows here so what to do i will select the project image again project image class then i will go to the advanced and i will add a transition okay so transition of 0.4 0.4 second then the timing function will be ease in out uh the css property to to animate will be the opacity then i will add even i will add also the transform that's it when i hit save now so the image uh the image reveal effect on hover like this let me check the front end now when i hit refresh so uh as you can see all the projects are stacked over each other so i have to do something here i will go to the project item then i will add the bottom space of at least 30 pixels save i will go back now to the to the front page refresh so as you can see our projects are like this now when i hover i believe that part of the image below is hidden below this so how to fix this part of the image is below this this the second project item sold how to fix this i will go to the select the image the project image class then i'll go to the advanced delay out then i will set the z index to one just to make an upper or layer okay i will hit save now i will refresh so as you can see now now the full image just like this that's cool but let's add more animation or more transitions here so what to do here i will select the project image again and i want to move it a little bit down in the initial state or the normal state and when i hover it move it moves up then i want to do like a zoom like a zooming effectively like zooming effect so i will use this scale transform also it's just an extra adding an extra transitions here or transforms so i will select the the project image the initial state of the project image i will go to the effects here we have the opacity now set to zero we have the transform uh transition sorry that we have the transform [Music] the the translate y fifty percent which is perfect but i wanna push it a little bit or move it a little bit down so i will sit at 40 minus 40 instead of minus 50. i will return it i will make it 50 when i hover when i hover i want it to be 50 okay so it's minus 40 now uh i will add another transform here i will add the scale transform and i want to squeeze it a little bit to 0.8 so in in its initial state or normal state it will be [Music] squeezed a little bit to 0.8 of its size so this is the uh let's say the the normal state or the initial state now the hover state and the hover state i will select this project item then i will go to the state we have created here then i will go to the advanced effects the transform then i will add the first transform which is the translate i will return the y translate to uh from 40 to from minus 40 to -50 then i will add another transform which is the scale here i will return the scale to one okay so i will hit save refresh so as you can see we have now this like a zoom effect zoom out effect this is really cool so we have created our projects page with the an image reveal on hover effect one last thing to do i will move this project on on hover let's add more animation let's spice the this example more i will select this project title here this is the initial state of the project title i will okay i will keep it like this but i will select the project item and i will add another state here at state and on hover i want to target the project title then i want to add let's add a padding here a padding of 20 pixels to the project title yes on hover save so as you can see on hover it moves but we have to add transition to the to the class project title so i will go to the advanced effects transitions then i will add transition of 0.4 with our easy in easin out we have animated the padding so i will just write padding here that's set save refresh so this is our projects page so as you can see the title is moving with the image like this you can play with the transform properties and you add more transitions you can add a shadow shadow on hover so as you can see in this example we have created the we have retrieved the projects uh by using the repeater element of oxygen and we have created this image uh reveal effect i hope you guys like this tutorial please if you do like this tutorial please uh like share and subscribe and give me uh your comments your questions i will be so happy to answer your questions and see you in the next video thank you

Channel: Taimur Aziz

Views: 3,890

Keywords: Oxygen Builder, WordPress, Image Reveal, CSS

Id: Lp2Q0Sf5G94

Length: 27min 26sec (1646 seconds)

Published: Mon Mar 01 2021