Hey 👋 Have my videos ever helped you out? Want to support my RUclips Channel and buy me a coffee? It would mean a lot to me & help me to create more useful content. www.buymeacoffee.com/TaimurAziz
this is the second video I am watching yours , and glad to say that I am learning new things from your great videos , much love to you brother , waiting for your responsive design videos
I am short of words. I was demotivated while doing a project but your video just motivated me in the middle of the night to start working again because i felt like opened my eyes to things that gave me wings. You even make it easy. Sure you deserve a more than a cup of coffee. I respect the humility. Thanks alot.
Great video. Thank you. Only thing different I think I would do is apply the type of overlay class to the card class - that way you don’t have to remember what class goes where on the content. Eg: .card.fade or .card.fade.slide-to-top … that way you can stack the effects. Don’t even need the “overlay” class then. Just have to add a child DIV that gets targeted by .card > div I am new to Oxygen and your video was a great help.
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?
Custom states was something I did not know before. Did you discover yourself or do Oxygen Team mention this feature on their documentation ? Just wondering. Thank you very much for helpful content
Adding custom states was mentioned in some videos by the Oxygen team. But using the custom states of a parent element to target child elements was a trick I figured out when I was playing with Oxygen :)
Great tutorial @Taimur. Do you find it easier to do this using the builder interface, or to write the CSS? Personally, I prefer to write it all out, that way I can always see what is happening at a glance on the stylesheet. Either way, great stuff!
I agree that writing your CSS code gives you more control but as you know tools like Oxygen Builder and Webflow are built mainly as no-code tools and intended for people with less coding experience or who love to create websites visually. That's why I focus on my videos to use the builder interface as much as possible.
The normal hover state will apply on the .card class only but via the custom state, I managed to target a child selector (.fade) when we hover the parent .card class
Greath Tutorial. I am amazed with the speed of your oxygen on you computer. when i save my page i need to wait 2-3 seconds (when the project is local and up to 10 seconds when it is hosted. What program do you use for local host. I have tried local by flyweel and it works but not as fast as your oxygen.
I tried it and it works but it will replace (translate) with (rotate). I believe it's better to use the custom CSS until the Oxygen team fixes the bug.
you can also just do translate 1 - don't think anyone will notice 1px difference (til they get the bug fixed) And if you do 1px for all of them, it will be consistent :)
Good job, Taimur! Thanks. As far as I think this method is great for controlling objects contained only in parent div. Is it possible to control some object in a completely different div?
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!
Big thanks!! But i need your help.. When I click on my img open this: about:blank#blocked. I want open modal after click, not website. What should i do?
Hey 👋
Have my videos ever helped you out? Want to support my RUclips Channel and buy me a coffee? It would mean a lot to me & help me to create more useful content.
www.buymeacoffee.com/TaimurAziz
I am a novice at Oxygen and watch a lots of tutorials. Your videos are really good. You are a very good teacher Aziz. Thank you.
I've been using Oxygen for months and never knew you could use a custom states, that's great 👍
Found your video on the right time and learned custom states, I was only using selectors till yesterday. Helpful!
Yes, we like it very much. Your way of teaching the use of classes and states will help new Oxygen users.
this is the second video I am watching yours , and glad to say that I am learning new things from your great videos , much love to you brother , waiting for your responsive design videos
I am short of words. I was demotivated while doing a project but your video just motivated me in the middle of the night to start working again because i felt like opened my eyes to things that gave me wings. You even make it easy. Sure you deserve a more than a cup of coffee. I respect the humility. Thanks alot.
just wow i watching your all Videos
Really useful Taimur, thank you. Just what I needed.
Wonderfull, we need, and want, more and more videos like yours.
Many Thanks for your work
Thank you for the tut's. Finally someone who knows what he ist doing. Big thumbs up!
Thanks :)
@@TaimurAziz I hope to see a lot more of this kind of videos. They changed my perspective on the oxygen builder :). Thanks again
Awesome, I like the use of custom state for the hover effect.
Thanks. Many cool tricks can be done using the states feature.
Good work
Nice tutorial, thank you Taimur !
Amazing course thanks so much
Great video. Thank you.
Only thing different I think I would do is apply the type of overlay class to the card class - that way you don’t have to remember what class goes where on the content. Eg: .card.fade or .card.fade.slide-to-top … that way you can stack the effects.
Don’t even need the “overlay” class then. Just have to add a child DIV that gets targeted by .card > div
I am new to Oxygen and your video was a great help.
Good point!. I'm glad that you find it helpful.
Excelente video ! muchas gracias!
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?
Wow! thank you for this.
very good. please make more videos like this one
really good tutorial - more in depth and helpful - please do more like this - have subscribed - don't want to miss stuff like this
Thanks :) I will upload more Oxygen videos.
Really really really well done!!!!!
Wow man, Thank you, i was trying to replicate a web and this kind of hover images was impossible to do.
So much good came from watching this. Thank you ! :)
Thanks, that was really helpful!
Thank you so much! This is exactly what I was looking for!
Thank you very much Taimur, i have learned a lot in this video !
I'm glad that you find it useful. The next video will be within 2 days and it will show so many useful tips 😎
Great stuff Taimur, thanks!
Thanks :)
Thank for your vidéo
Clear and to the point
Thanks :) make sure to subscribe if you are interested in more Oxygen Related content.
Wow! Thank you.
Nice tutorial
Glad that you liked it. Please make sure to subscribe as I will post more Oxygen related content.
Custom states was something I did not know before. Did you discover yourself or do Oxygen Team mention this feature on their documentation ? Just wondering. Thank you very much for helpful content
Adding custom states was mentioned in some videos by the Oxygen team. But using the custom states of a parent element to target child elements was a trick I figured out when I was playing with Oxygen :)
Great content!
Thanks ☺️
Great tutorial @Taimur.
Do you find it easier to do this using the builder interface, or to write the CSS?
Personally, I prefer to write it all out, that way I can always see what is happening at a glance on the stylesheet.
Either way, great stuff!
I agree that writing your CSS code gives you more control but as you know tools like Oxygen Builder and Webflow are built mainly as no-code tools and intended for people with less coding experience or who love to create websites visually. That's why I focus on my videos to use the builder interface as much as possible.
Nice! For me "hover .fade" didn't work. I had to put ":hover .fade" , great work.
Thanks for the lovely video Taimur, just one question why don't you use normal hover state rather than custom state?
The normal hover state will apply on the .card class only but via the custom state, I managed to target a child selector (.fade) when we hover the parent .card class
Cheers mate I subbed to see more oxygen.
Thanks ☺️
Thank you so much for this!
I would like more videos
Greath Tutorial. I am amazed with the speed of your oxygen on you computer. when i save my page i need to wait 2-3 seconds (when the project is local and up to 10 seconds when it is hosted.
What program do you use for local host. I have tried local by flyweel and it works but not as fast as your oxygen.
After many years of using XAMPP I switched to Laragon. It's so fast and flexible.
A work around for the bug is to set rotate to 0 on the custom hover state. This will trigger the translate property to work.
I tried it and it works but it will replace (translate) with (rotate). I believe it's better to use the custom CSS until the Oxygen team fixes the bug.
you can also just do translate 1 - don't think anyone will notice 1px difference (til they get the bug fixed)
And if you do 1px for all of them, it will be consistent :)
@@thewhiterussian138 Thanks, I tried this 1px fix before but I wanted to highlight this bug :)
If you use % instead of px? Same problem?
@@Jeanpierre.michael Yes. The problem is that the builder considers zero as an empty value.
great.. please make a tutorial to create carousel post🙏
Yes, I will do it :)
Good job, Taimur!
Thanks.
As far as I think this method is great for controlling objects contained only in parent div.
Is it possible to control some object in a completely different div?
Yes, definitely. But in this case we have to use a one line of JS.
@@TaimurAziz Can you reveal how to control objects in another div?
Great video 👌🏻
Thanks 😊 please make sure to subscribe if you want to see more Oxygen tutorials.
@@TaimurAziz maybe you should include the #OxygenBuilder tag to get more eyes on your video content 👍🏻
@@AmandaLucaseu Added 😎
Can this be used on woocommerce product images to show add to cart button as a link? Amazing tutorial btw. Keep it up!
Yes you can. You can apply this example on different use cases. I will record tutorials for Woocommerce in the near future.
@@TaimurAziz thank you!
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 tutorial, where are you from Taimur?
Thanks. I'm from Libya
@@TaimurAziz That's great
hi Taimur Aziz, how to scale image on hover like Supperbox. Just jum in image, not change image size!?
AH, i found it, just let image in to a div and layout overflow = hidden
Big thanks!! But i need your help.. When I click on my img open this: about:blank#blocked. I want open modal after click, not website. What should i do?
Glad that you liked it. Please send me an email if you need assistance. taimur.aziz@gmail.com
@@TaimurAziz Thanks! I wrote on email 🙌🏻
It's possible to add some effects to the image of the card?? .
Yes sure. You can add a scale transform on hover to have a zoom-like effect.
@@TaimurAziz thanks..
I hope you working on the next video.... Come now. Wakey wakey, no time to sleep 🤣
😂😂😂 Yes, I already decided the content of my next video.
@@TaimurAziz you made me wanna switch on my laptop and follow along. Brilliant and smart explanation. Well done