- 5
- 57 501
Taimur Aziz
Registrace 4. 10. 2011
On this channel I will upload videos on the subject of UI/UX design and development.
Create 3 Card Hover Interactions using Oxygen Builder
In this tutorial, we are going to learn how to create 3 different hover effects and interactions using only oxygen builder and without any 3rd party plugins or libraries.
⌚ Timestamps
0:00 Intro
1:12 Card 1 - Image scaling effect
9:55 Card 2 - Image swapping effect
21:12 Card3 - Image 3d flip effect
.
Have a project in mind? Let's talk!
Email me: taimur.aziz@gmail.com
#OxygenBuilder #WordPress #WordPressBuilder #CSS
⌚ Timestamps
0:00 Intro
1:12 Card 1 - Image scaling effect
9:55 Card 2 - Image swapping effect
21:12 Card3 - Image 3d flip effect
.
Have a project in mind? Let's talk!
Email me: taimur.aziz@gmail.com
#OxygenBuilder #WordPress #WordPressBuilder #CSS
zhlédnutí: 9 778
Video
How to create a custom full screen slider using Oxygen's Slider Element
zhlédnutí 19KPřed 3 lety
In this tutorial, I will show you how to create a creative full-screen slider using the default slider element of Oxygen Builder. . Want to work together? Email me: taimur.aziz@gmail.com #OxygenBuilder #WordPress #WordPressBuilder
Building a Hero Section With a Full Screen Off-Canvas Section using Oxygen Builder.
zhlédnutí 9KPřed 3 lety
In this tutorial, I will show you how to create a hero section with a hamburger menu and a full screen off-canvas section using Oxygen Page Builder. . Want to work together? Email me: taimur.aziz@gmail.com #OxygenBuilder #WordPress #WordPressBuilder
Projects Page with an Image Reveal Effect Using Oxygen Builder.
zhlédnutí 6KPřed 3 lety
In this tutorial, I will show you how to design a projects page with an image reveal effect using Oxygen Page Builder. . Want to work together? Email me: taimur.aziz@gmail.com Want to support my CZcams Channel and buy me a coffee? It would mean a lot to me & help me to create more useful content. www.buymeacoffee.com/TaimurAziz #OxygenBuilder #WordPress #WordPressBuilder
Image Overlay Hover Effects Using Oxygen Builder.
zhlédnutí 13KPřed 3 lety
This video shows you how to create image overlay hover effects using Oxygen Page Builder. I hope you like this tutorial. Thanks Want to work together? Email me: taimur.aziz@gmail.com #OxygenBuilder #WordPress #WordPressBuilder
Perfect video! Thank you so much
how to make a full website?
You mean from Figma design?
@@TaimurAziz no, I mean a complete website which take 2 to 3 or even 4 hours. So many videos on Elementor but not on Oxygen builder. Also advice me if Bricks is better or oxygen for pixel perfect custom designs? Thanks
@@ControllerCommand I will consider a full site builds tutorials. Regarding Bricks, Yes I prefer it over Oxygen.
This was excellent. Thank you so much!
what if project-image is inside another div and it doesn't have a parent div? Would it still be possible to make the animation happen when on over?
you are top notch brother.
perfect
Hey! I did follow all the tutorial but my .unslider-arrow.next get override from another .unslider-arrow.next. Why is that happening? In the oxygen builder I do see the changes take place but then when I go to the front end part it's not happening at all. When I inspect my website I have 3 .unslider-arrow.next and the one that I modified it's getting override
The tutorial dates back, and I'm unsure if the Oxygen builder team has since made changes. If that's the case, consider enhancing the CSS selector's priority by appending !important to each property.
Hi this is a really great tutorial. I have struggled because I have made mistakes but this is really teaching me something and its grat that its all done in Oxygen :-)
Why you stopped creating amazing tutorials ☹
24:37 hello I am stuck at this part. I entered the top value to auto and bottom to 50 px, but on my screen the arrow does not move at all both in oxy and front end. Not sure how to fix this but it's not doing any changes. How to fix?
Hello Taimur 1st thank you for this video, it is very useful. For Video Time at 11:15 the correct value is 1 % not 0 px. Anyway can you PLEASE show us something new, eg with click move something around?
Excellent tutorial!!
Really useful Taimur, thank you. Just what I needed.
Gr8 tutorial. However, would be nice if you had wrote down the color codes and linked to the arrow image. But super nice guide
For the sake of lazyness I would be so grateful if you could share the json for this template🙏
Just Amazing!! Please give me images of slider.
thanks, it's so a clear tutorial for me.
Wow, Just Amazing what you can achieve with a little CSS with Oxygen Builder. I would have liked to see what the mobile version would look and function like.
Thank you so much for this tutorial! I had stopped using sliders during my time with Elementor because of the burden on page speed. How much weight does an Oxygen slider have on pagespeed?
Awesome tutorial! Thanks.
In my version of O.B. when i set the (hover .card1-image in opacity 1) the image change the opacity, but the gradient is out. ... version is 4.0.3
Man, way too many steps before even see an image. In Elementor that would take a fraction of the time.
Excelente video ! muchas gracias!
This is a really great tutorial bro! One of the best.
Amazing tutorial. Thanks a lot!!!
That was amazing!! Please make more such videos it helps us a lot
Thank you very much, Taimur! It would be great if you could show us how to make it responsive :)
Can this be done with dynamic content?
I'm going to upload a new video this weekend about how to make a dynamic slider.
@@TaimurAziz That is awesome, will watch for sure :D
liked and subscribed
Keep doing these videos, it motivates many people
Beautiful thanks, keeps doing videos so exited to see what you come with
pls keep creating you're a great teacher!
awesome :D
Супер!!!
MashaAllah brother great work wow. I've seen many tutorials, and your methodology is very helpful
Thanks, that was really helpful!
Everyday I'm loving Oxygen more and more. Amazing tutorial. Instantly subbed. Didn't even think you could do this in Oxygen. Please make more.
Hi, thanks for great video! Very informative. Is there any chance that you do another tutorial on how to optimize it for mobile?
Excellent - what's the most robust way to turn the entire card into a link?
You can change the parent div with .card class into an anchor tag <a> and make sure that the display is set to "block"
@@TaimurAziz Thank you.
Wow. This video just takes my understanding of CSS and Oxygen to a whole new level
Thanks. Glad you like it!
Taimur excellent tutorial! Thank you for creating this. How would you set the background (body) to stop scrolling when the off canvas is opened.
I aded this: jQuery('.menu-button').click(function() { jQuery('body').toggleClass('overflow-hidden'); }); then just added a .overflow-hidden selector and set overflow to hidden it works but not sure if it is the correct way of achieving it
Thank for your vidéo
hello Aziz, your tuto is great and i learn a lot, but the flip box card 3 bugs on safari. Does anyone know the solution?
Genius
Man, it's simply amazing! Congrats for you skills! Let me know where you're from and give me the opportunity to chat in order to exchange experiences and knowledge! I hope I have some to pay you back!!!!! Thanks a lot for this class! God bless you!
Thanks, man. I'm so glad that you liked my tutorials. It's my pleasure to chat with you. You can find my email in the description. Cheers!
Man, it's simply amazing! Congrats for you skills! Let me know where you're from and give me the opportunity to chat in order to exchange experiences and knowledge! I hope I have some to pay you back!!!!! Thanks a lot for this class! God bless you!
Great video. Is it possible to close the offcanvas menu after clicking a link? I'm talking about #links to elements on the same page.
Dear Taimur, thanks for the great tutorial. I have one issue with the mobile view of the burger menu. If I click on it on mobile the transformation/rotation to "X" only happens after you make another click somewhere else on the phone. In all other cases the hover status is visible (the one line in the middle). Do you have any idea how to approach this? Thanks and have a great day
Fantastic! So useful
Fantastic! So useful
It is zen like watching you explain! More content please!