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
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?
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.
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 :)
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 :)
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.
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
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.
Yes, we like it very much. Your way of teaching the use of classes and states will help new Oxygen users.
Found your video on the right time and learned custom states, I was only using selectors till yesterday. Helpful!
Wonderfull, we need, and want, more and more videos like yours.
Many Thanks for your work
I've been using Oxygen for months and never knew you could use a custom states, that's great 👍
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?
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
just wow i watching your all Videos
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.
Excelente video ! muchas gracias!
Nice tutorial, thank you Taimur !
Really useful Taimur, thank you. Just what I needed.
Amazing course thanks so much
So much good came from watching this. Thank you ! :)
Awesome, I like the use of custom state for the hover effect.
Thanks. Many cool tricks can be done using the states feature.
Thanks, that was really helpful!
Good work
Thank you so much! This is exactly what I was looking for!
Wow! thank you for this.
Really really really well done!!!!!
very good. please make more videos like this one
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 😎
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.
Wow man, Thank you, i was trying to replicate a web and this kind of hover images was impossible to do.
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.
Great stuff Taimur, thanks!
Thanks :)
Wow! Thank you.
Thank you so much for this!
Thank for your vidéo
Nice! For me "hover .fade" didn't work. I had to put ":hover .fade" , great work.
great.. please make a tutorial to create carousel post🙏
Yes, I will do it :)
Nice tutorial
Glad that you liked it. Please make sure to subscribe as I will post more Oxygen related content.
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.
Clear and to the point
Thanks :) make sure to subscribe if you are interested in more Oxygen Related content.
Cheers mate I subbed to see more oxygen.
Thanks ☺️
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 ☺️
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.
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.
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
I would like more videos
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 😎
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?
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
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!
Great tutorial, where are you from Taimur?
Thanks. I'm from Libya
@@TaimurAziz That's great
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..
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?
Glad that you liked it. Please send me an email if you need assistance. taimur.aziz@gmail.com
@@TaimurAziz Thanks! I wrote on email 🙌🏻
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