Animated Profile Card UI Design using Html & CSS

Click For More : www.youtube.co...
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
CSS Infinity Course : www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
#csseffect #topcsseffects
------------------
give proper credit if you repost this on other social media platform
------------------
Inspired By These
Animated Login Form with Source Code | Login Page using Html CSS
• Animated Login Form wi...
Animated Profile Card UI Design using Html & CSS | CSS Card Hover Effects
• Animated Profile Card ...
------------------
image source : www.pexels.com
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[@EXPERIMENTSHOW.]

thank u soooooooooooooooooooooooooooooooooooooooo much bro. LOVE FROM INDIA

[@pink-doublethink]

*Thanks* for the interesting content!

[@OnlineTutorialsYT]

Glad you enjoyed it!

[@alexvaper5625]

Thank you very much, for the excellent work, for the efforts invested, for the time and effort spent usefully for the cause. For persistent efforts and dedication to your work, for a creative approach and an effective result! I wish you to continue your work in the same spirit!

[@OnlineTutorialsYT]

You are welcome!

[@sdfsfsfd437]

Awesome!!!! Many thanks!

[@OnlineTutorialsYT]

No worries!

[@lakhvindersingh35]

First

[@wisalahmad2077]

Sir this really amazing 😍

[@hengamehvalizadeh4484]

amazing toturial...thank you very much boddy 👏👏

[@suraj-se5ne]

Bhai jagab ka talent hai

[@nahidulislamsagorsrk8469]

YOU ARE LEGEND 😍😍

[@tradinglibrarystation]

code for image recolor when hover: .card:hover .imgbx img { filter: none; }

[@claude.oberko]

what was the dimension of the photo

[@ramonguerra5655]

Thanks

[@thierrycouffinhal7081]

GREAT !

[@BARRYOME]

Cool👍

[@Cyber_Madhuwa]

wow..!!!❤️

[@ashwinink]

I cant find this on Online tutorials. I did exactly the same but I am not able to see it. Can you help

[@Crjunior2024]

Same try but no result

[@farukweb]

Nice card UI .

[@Crjunior2024]

This is live servet

[@hakunamatata1427]

Please suggest course of html and css for me, dude I really wanna know how you got magic in your hands..!

[@saurabhpandey8020]

He himself offers courses on udemy

[@ngfrompakistan]

1.Code with harry 2. Apna college

[@bdbrothersltd7055]

Just wash your hand by Dettol.

[@ngfrompakistan]

@@bdbrothersltd7055 😂

[@hakunamatata1427]

@@bdbrothersltd7055 I hope it worked for you..! 🤭

[@RajKumar-hi6bc]

Bro how you make it I hope i am learning from you it's awesome but sad part is when I try to add something i soils everything

[@OnlineTutorialsYT]

How can I help you?

[@RajKumar-hi6bc]

@@OnlineTutorialsYT bro in your dynamic login form password showing eye was not there somo how I get it in place but transition effects not working properly that login form you show in initial part of video thanks for reply

[@ilovejesus.100]

where link 😢

[@JaloliddinDilmurodov]

code yes

[@Crjunior2024]

I was copy that but doesn't work and your which one side coding and another side was result give a tutorial video and which extension give full tutorial video plzzz

[@voaneves]

Bro, you are a king! Thanks for the excellent work, everything you're doing is really great for us devs.

[@Crjunior2024]

Hlo KZbin sirr

[@roshandongare186]

Hats off to your imaginations and the implementations of the same. Thank you so much a great work. It inspires us.

[@LouMarten]

This UI Card does not work as shown in the above video in all browsers and mobiles. There's a problem with the linear-gradient that doesn't work with hexacode and needs to be rgba-colors. The image used needs to have a position that has to be relative because of the z-index and if you use a different .jpg file than the one above, you need to adjust the imgBx. Also the card needs to be adjust if you have a longer job title. And the links in the discription doesn't give you any source code but show you the course you can take. There is to little explanation about when it wouldn't work in other browsers situation. Allthought this video has inspired me.

[@Mitrezir]

Hello my friend. First of all, let me say that it is a very good work. I had a question. The image filter color was changing when the cursor was on the image when the project was finished. But you didn't show it in the tutorial.

[@codewithhira4421]

Check it on 8:36 he applied the grayscale filter

[@Mitrezir]

Yes, but the grayscale filter would revert to its original color when the cursor was hovered over the input photo. In the end, he didn't or forgot.

[@DarkArly]

@@Mitrezir look 16 comments after - Amr Magdi Mustapha, it works !

[@onlinetv6397]

hello sir make video with hindi sounds voice audios are not in the any videos making with voice over plzz...

[@Samuel01477]

Voice over isn't needed keep your opinions to yourself

[@noor_63]

Thank you very much, for the excellent work but how to download this animation card please reply me

[@mati14455]

👏👏

[@markzait2750]

Very useful video! Thanks!

[@OnlineTutorialsYT]

Glad it was helpful!

[@claude.oberko]

what was the dimension of the photo

[@bexruzmaxmudov8003]

Musur sukaaa

[@kolinekgp456]

Why everyone always is using pixels? Please show how to create this type of things more responsive...

[@tupapa7642]

the tutorial it's awesome but the music it's a pain!

[@pelasgian1454]

always the indian people teaching us nice stuff. Thanks for that!

[@claude.oberko]

what was the dimension of the photo?

[@MOdevco]

Second

[@emmanuelisunuoya8999]

Wow so awesome pls can you make another phone website

[@ashikeshan1529]

Excellent like always. What's the name of the music ?

[@alifkhan6533]

Bro the hover effect of height doesn't working

[@XojiakbarPolatov-n3b]

cursor: pointer; qani

[@germanfrankherk1436]

f0ck its amazing

[@alext.rivera6043]

Very good, you are a crack!!! 👍🏾

[@hellenicpirate3050]

that's wonderfull , exciting at the same time!!

[@dingg9842]

Link ?

[@snoudev]

thank you very much, your work is always great

[@josedanielmendoza2305]

asombroso ..... saludos desde Bolivia

[@gnomol]

Perfect, thank you.

[@Respectshorts-nn4zf]

You forgot the image color when it is hovered 👀

[@dailymotiv1h.24]

.card .imgBx img:hover { transition: 2s; filter: grayscale(0); }

[@dailymotiv1h.24]

What is the validity of this code? Although he works, but I want to make sure does he write like this?!!

[@Respectshorts-nn4zf]

@@dailymotiv1h.24 🤝

[@droid-jr9940]

maravilloso bro !!!

[@batmanlovepu]

When you edit in VS Studio code. What browser do you use for realtime display? Thank you.

[@DiegoCurbelo]

npm i -g live-server

[@batmanlovepu]

@@DiegoCurbelo Thank you

[@claude.oberko]

@@DiegoCurbelo what was the dimension of the photo

[@hellohell143]

Live preview extension their