Very nice Hank! I do have a question, however. In reproducing this effect, I saw an opportunity to optimize the CSS code a bit by declaring variables for the filters as a style attribute in each card instance (creating the variable --hue as 0deg, 150deg, 300deg, and 90deg for each), as opposed to declaring and creating 3 more selectors to apply the filter. I then created the filter property for the .card selector and apply the variable into the property accordingly. While this achieved the desired effect (each card got its own hue), it somehow wound up disabling all of the 3D transform hover effects for the elements inside of the cards; the card itself still rotates when hovered. Do you happen to know why this happens? EDIT: Hmm... Since the cards were wrapped by the .parent div class, I experimented and applied the style to those instances, then moved the filter property to the .parent selector accordingly. THAT works. Now I'm curious as to why applying that filter using a variable would kill some the properties in the child classes? 🤔
Hey! Well I'll have to check the video, I actually have forgotten what I did, will have to look it up and then can tell you haha, sorry bout that, glad it worked though. 🤜🏻🤛🏻🔥
@@HankTheTankCoding Haha, no worries. I was just curious, because I'm relatively new to CSS and I haven't seen that kind of behavior before. FWIW, I applied this to each .card instance in index.html, i.e. style="--hue:150deg;", with each of the values plugged in above for each card class instance on the page. I then added this to the .card selector: filter: hue-rotate(var(--hue)); - this is what caused the hover effects for the elements inside the card to stop working. As mentioned above, moving the style declarations and the property to the .parent elements fixed the problem. Regardless, thank you so much for this demo. You've inspired me to play around and experiment with 3D transform effects! 😁
Thanks alot for your wonderful comment, comments like these inspire me sooo much to keep going, even though there are days I feel down regardless of putting in so many videos in the channel, I'm glad that atleast some are getting help, means alot to me, really alot.
@@HankTheTankCoding thanks for your help actually I'm very frustrated 😔😔😔 because I'm 27 and I have no skills and I don't know how do I make myself jobs 😭😔 so I need too much help....
Hello Hank, good Sunday, I just finished your video on card css hover, spectacular, I thank you, I'm learning
Glad you liked it ! A good Sunday to you as well mate ❤️
Nice you r genius
Thanks ;)
very impressive
Thanks
Namaste Sir, I loved the design you created
Namaste and I'm glad you liked it ;)
Beautiful, awesome, great tutorial, thanks!
Thanks for such a wonderful comment ❤️
Very helpful for me
Thank's
Welcome 😊
Very Good 👏🏻👏🏻👏🏻👏🏻
Thanks
Very nice Hank! I do have a question, however. In reproducing this effect, I saw an opportunity to optimize the CSS code a bit by declaring variables for the filters as a style attribute in each card instance (creating the variable --hue as 0deg, 150deg, 300deg, and 90deg for each), as opposed to declaring and creating 3 more selectors to apply the filter. I then created the filter property for the .card selector and apply the variable into the property accordingly. While this achieved the desired effect (each card got its own hue), it somehow wound up disabling all of the 3D transform hover effects for the elements inside of the cards; the card itself still rotates when hovered. Do you happen to know why this happens?
EDIT: Hmm... Since the cards were wrapped by the .parent div class, I experimented and applied the style to those instances, then moved the filter property to the .parent selector accordingly. THAT works. Now I'm curious as to why applying that filter using a variable would kill some the properties in the child classes? 🤔
Hey! Well I'll have to check the video, I actually have forgotten what I did, will have to look it up and then can tell you haha, sorry bout that, glad it worked though. 🤜🏻🤛🏻🔥
@@HankTheTankCoding Haha, no worries. I was just curious, because I'm relatively new to CSS and I haven't seen that kind of behavior before. FWIW, I applied this to each .card instance in index.html, i.e. style="--hue:150deg;", with each of the values plugged in above for each card class instance on the page.
I then added this to the .card selector: filter: hue-rotate(var(--hue)); - this is what caused the hover effects for the elements inside the card to stop working. As mentioned above, moving the style declarations and the property to the .parent elements fixed the problem.
Regardless, thank you so much for this demo. You've inspired me to play around and experiment with 3D transform effects! 😁
Thanks alot for your wonderful comment, comments like these inspire me sooo much to keep going, even though there are days I feel down regardless of putting in so many videos in the channel, I'm glad that atleast some are getting help, means alot to me, really alot.
Nice. New frind here hop d sme
❤️🎉
Link for image ?
images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg
👍👍
thanks...
You're welcome 😊
background img??
Yes
images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg
Not working on my code😢😢
Is it? Make sure to follow up well, you might have missed somewhere ;)
@@HankTheTankCoding please provide codes in this video description
@@rivardhanrana4339 I usually provide the source code but for this one idh the code unfortunately, pls check the latest one , thank you
@@HankTheTankCoding thanks for your help actually I'm very frustrated 😔😔😔 because I'm 27 and I have no skills and I don't know how do I make myself jobs 😭😔 so I need too much help....
@@rivardhanrana4339 don't worry , keep working hard steadily, you'll make it. God will help you ❤️