Create 3 Card Hover Interactions using Oxygen Builder
Vložit
- čas přidán 28. 07. 2024
- 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 - Věda a technologie
oh man, was I glad to see you pop-up again in the list! Glad to see you back Taimur! You rock man, great tutorial
Thank you so much. I really appreciate your support.
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 :-)
I recently discovered this channel. It was a revelation. Make simple things that used to be much more complex. Great.
Happy to hear that!
Glad to see you back again Aziz. I am so impressed and happy, you made my day!
Thanks bro, I'm glad that I made your day 🥰
Great tutorial
I luv this tut... thank you and welcome back
Hey, please make the images available to download
Thanks for this
Welcome back. Nice to hear from you again.
Good stuff Taimur. Keep them coming
Great to see you making tutorials again. Thanks
Thanks 😊
Great tutorial !! Would've liked to know this channel early.
Good morning, 7 am Tokyo. As usual great value tutorial. Since I am drinking coffee, I am happy to buy you one. Take care!
Thank you, Bruno. I really appreciate your support. It means a lot to me.
Good To Watch and Learn From Your Video Again Sir... Thank You
Welcome back brother really good to see another awesome work
Great video! Keep them coming :)
This is really high quality work
Glad to see you back mate! :)
Very helpfull tutorial, thank you for sharing Taimur !
Good to see you making videos again! Nice video. Hoping to see many more, more consistently. Hope you've been doing well! Welcome back.
Thanks Shae, I really appreciate your support.
MashaAllah brother great work wow. I've seen many tutorials, and your methodology is very helpful
As always, another amazing video tutorial. Thank you brother. Please keep up the good work. We had missed you!
Thanks bro. I really appreciate your support.
Great tutorial man. That state/pseudo class thing was something I never used before. I would just type out the code in a stylesheet. Never again!
Amazing!
Awesome tutorial
Your tutorial is big help for me. I feel I upgraded my css skill thanks to your tutorial. I clicked like and I subscribed to your channel. I look forward to your next tutorial. Thank you very much.
Glad it was helpful :) Thanks for the sub!
Best thing need time we wait for your next knowledge of css weapon video in oxygen, you are doing great job bro.
Thanks, Bro. I'm glad you like my videos.
nice to see you again! I hope you're all right? High quality as always.
Thanks!
Super video as always. Thanks 🙏🏻
Thanks Amanda.
Amazing Content
Welcome back!
Thanks Bro.
Brilliant again. When is your course coming? I can't wait any more man. Your tutorials are SO good :)
Thanks. I'm so glad you liked my tutorials .. The course will be available in January 😎
Very good tutorial! Thank you! I wouldn't have had the idea to input pseudo classes into the state field (even if I usually type them in custom css code)
Thanks, I'm glad you liked it.
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
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?
@taimur - thanks for taking us back to the basics. Love your approach. I think you should partner with Kevin at digitalambitions. Similar vibes, different teaching styles…lol.
Btw, what font family do you have there in your default typography…looks sleek.
Great suggestion! I'm glad you liked my content.
Fonts used in this video are free Google fonts Playfair Display (Headings) & Montserrat (Text)
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 and make sure that the display is set to "block"
@@TaimurAziz Thank you.
This is great, do you teach this anywhere?
Soon I'm launching a dedicated website for Oxygen Builder courses & tutorials. I will announce it on this channel once it's ready, so stay tuned :)
Where can I learn more?
I'm working on a dedicated website for Oxygen Builder courses & tutorials. I will announce it on this channel once it's ready, so stay tuned :)
Do you have any other channels?
No, only this channel. Actually, everything happened by chance. I had no plan to start a CZcams channel and I hesitated a lot because of the language barrier but what happened after that was just amazing. So please let me know if you have a certain topic you want me to cover here.
Man, way too many steps before even see an image. In Elementor that would take a fraction of the time.
For the sake of lazyness I would be so grateful if you could share the json for this template🙏
Great tutorial
This is really high quality work