CSS 3D Foldable Card Hover Effects | How To Create a Flip Card with Html & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 12 พ.ย. 2024

ความคิดเห็น • 83

  • @kevlarkode
    @kevlarkode 3 ปีที่แล้ว +21

    This channel is real gold for website designers! ❤️

  • @obiarne
    @obiarne 10 หลายเดือนก่อน +1

    Thank you so much for this short, easy to follow and very interesting video! I made this with my own pictures, changed the text to something Christas like and used it as a digital christmas card!!! Thank you!!

  • @draybaba
    @draybaba 3 ปีที่แล้ว +8

    Seriously I’m speechless! Keep up the good work!

  • @dangminhkhai
    @dangminhkhai 3 ปีที่แล้ว +7

    hover effects is beautiful

  • @RishavPlayz2007
    @RishavPlayz2007 3 ปีที่แล้ว +3

    Oh My god 👁️👄👁️, I mean for real it so so so so good, amazing, fabulous😋✨, fantastic.. Yeha. Proud 💪😊 to be Indian 🇮🇳

    • @RishavPlayz2007
      @RishavPlayz2007 3 ปีที่แล้ว

      Wow sir! Thank you for ❤ on my comment. 😊

  • @prahladkumar2126
    @prahladkumar2126 3 ปีที่แล้ว +2

    I learn web design from your video "Thanks"

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  3 ปีที่แล้ว +1

      Great...
      But, my channel is not for basic learning :|

  • @sonihidayatulloh9242
    @sonihidayatulloh9242 3 ปีที่แล้ว +2

    Wow is very awesome thanks sir,
    success and health is always for you

  • @Dang_Quang_Minh
    @Dang_Quang_Minh 4 หลายเดือนก่อน

    It's really great, sir! Great!

  • @tauchcall5223
    @tauchcall5223 3 ปีที่แล้ว

    You are the most creative people

  • @fe4pwu298
    @fe4pwu298 3 ปีที่แล้ว +3

    Thank you so much. Really beautiful hover effect.

  • @gldzzpro5793
    @gldzzpro5793 3 ปีที่แล้ว +21

    The big problem for me in designing a website is the hover effect because its the best feature that you can include on your website but when it comes to phones user it will not work and as we know the community of phone users is much bigger than pc and laptop users so I wish that you focus on this problem in the future and suggest a solution for replacing hover effects with another effect for phone user for example how to build a responsive website that works with hover effect in the pc version and with scroll effect in the phone version like the two effect work at the same thing or the same HTML element I mean when you use the pc the element will animate using hover effect but if you use the same website on a phone the same element will animate using another effect like scrolling effect I hope that was meaningful for you I have confidence on you to find the best solution for this situation .

  • @ashutoshbiotech
    @ashutoshbiotech 3 ปีที่แล้ว +5

    It is mind blowing bro

    • @draybaba
      @draybaba 3 ปีที่แล้ว +2

      Yes very mind blowing!

  • @someshghanchekar6252
    @someshghanchekar6252 3 ปีที่แล้ว +1

    Include voice
    great video thanks 👍

  • @jakewood5475
    @jakewood5475 3 ปีที่แล้ว +1

    I like these cool and creative effects...

  • @vishnusaini790
    @vishnusaini790 3 ปีที่แล้ว +1

    awesome creativity👌👌👌

  • @bleedblue8511
    @bleedblue8511 3 ปีที่แล้ว

    Thoroughly enjoyed the music as much the content. It really suited well.

  • @deepasaxena8043
    @deepasaxena8043 3 ปีที่แล้ว

    I was thinking about it and got it by u thanks

  • @luistorres4367
    @luistorres4367 3 ปีที่แล้ว +1

    You are amazing maaaaann!!!

  • @tilakmagar571
    @tilakmagar571 3 ปีที่แล้ว

    Really interested. Thanks for video 🇳🇵🇳🇵🇳🇵

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 3 ปีที่แล้ว +3

    Amazing Sir

  • @TechTalkXplore
    @TechTalkXplore 3 ปีที่แล้ว +1

    Amazing brother

  • @xurshidbekabdumalikov8944
    @xurshidbekabdumalikov8944 3 ปีที่แล้ว

    Best channel

  • @naiarailucas7055
    @naiarailucas7055 2 ปีที่แล้ว

    muchas gracias, otro mas para mi coleccion, cuando consiga trabajo te dono

  • @digwillhachi
    @digwillhachi 3 ปีที่แล้ว

    This is great. I found an awesome code pen like this a while back which I adapted.

  • @debjyotirana2574
    @debjyotirana2574 3 ปีที่แล้ว +2

    Nice sir

  • @alijonabdusaidov2883
    @alijonabdusaidov2883 3 ปีที่แล้ว +2

    The best

  • @1ronaiden
    @1ronaiden 3 ปีที่แล้ว +1

    I have exact same code, but the imgBox doesn't 'cover' the rest of the card, even if I make Z-index higher, and when hovered over the text and social links move with the image? Baffling me as I literally have the 'EXACT' same code as in the video and it doesn't work

  • @snssatyabhagavan
    @snssatyabhagavan 3 ปีที่แล้ว +2

    Super cool 😎.

    • @draybaba
      @draybaba 3 ปีที่แล้ว +1

      Super super cool! Aqua cool!

  • @paulocesar-ui1kt
    @paulocesar-ui1kt 3 ปีที่แล้ว

    your videos are amazing!!

  • @haccreations3790
    @haccreations3790 3 ปีที่แล้ว

    Superb

  • @mansha4963
    @mansha4963 3 ปีที่แล้ว

    Omg he is p r o in designing. COOL

  • @krishnamoorthy1748
    @krishnamoorthy1748 3 ปีที่แล้ว +1

    Awesome 👍👍👍

  • @abdussattarmolla
    @abdussattarmolla 3 ปีที่แล้ว

    It's really very cool.
    Love it.

  • @Doomslayer420
    @Doomslayer420 3 ปีที่แล้ว +5

    First comment! Great tutorial

  • @benzy_
    @benzy_ 3 ปีที่แล้ว +1

    Cool 😎😎 bro 😀😀👍🏻👍🏻❤️❤️

    • @benzy_
      @benzy_ 3 ปีที่แล้ว

      Thank you for giving heart ❤️🙂..
      I am near half century in getting hearts and made nearly 200 views to your channel🥳🥳 ...
      Keep going and surely improve your English 😄😄..

  • @prashantanayak6061
    @prashantanayak6061 ปีที่แล้ว

    Thanks 😊 🫂 🙏

  • @artemijeka
    @artemijeka 3 ปีที่แล้ว

    thanks pro bro

  • @iamsorrycode..4822
    @iamsorrycode..4822 3 ปีที่แล้ว +1

    nice bro

    • @iamsorrycode..4822
      @iamsorrycode..4822 3 ปีที่แล้ว

      How do you come up with such an idea? I like your work very much...

  • @vinaymathrubai1244
    @vinaymathrubai1244 3 ปีที่แล้ว

    Super

  • @meekum2002
    @meekum2002 3 ปีที่แล้ว

    thanks for the nice video!

  • @marlonsilva3458
    @marlonsilva3458 3 ปีที่แล้ว

    amazing as always

  • @LufianCloud
    @LufianCloud 3 ปีที่แล้ว

    Can this be done on click? Because I wanted to do this on click, and then return to closing animation on clicking an "x" object or something.

  • @josecarloszamoragomez9529
    @josecarloszamoragomez9529 3 ปีที่แล้ว

    Amazin bro

  • @millieandcupcake
    @millieandcupcake 3 ปีที่แล้ว

    Hi how do i shrink my image it isnt fitting on the card

  • @akshayrupareliya175
    @akshayrupareliya175 3 ปีที่แล้ว

    Image is not loading so help me

  • @garimabaghel1944
    @garimabaghel1944 10 หลายเดือนก่อน

    But mera contact centre m hi nhi ja rha hai kaha mistake ho skti hai jo body m kiya hai vo same maine bhi Kiya but nhi hua

  • @PhanTimo01
    @PhanTimo01 2 ปีที่แล้ว

    you forgot to add "will-change: transform;" to ".card .imgBox " and ".card .imgBox img" to prevent the slight shift for the content when the animation fires. Otherwise, a good tutorial man.

  • @hamzach146
    @hamzach146 3 ปีที่แล้ว

    Brother the link that u gave in css stylesheet has been changed now...it is not appearing on bootstrap website

  • @ashaananmeerutd691
    @ashaananmeerutd691 3 ปีที่แล้ว

    Style CSS ? I need that

  • @mustakimkureshi3603
    @mustakimkureshi3603 3 ปีที่แล้ว

    Please make on android ui tutorial.

  • @JayashanLakshitha
    @JayashanLakshitha 3 ปีที่แล้ว

    Hi, Can I show your work on my website and provide links to your courses and youtube channel

  • @gigaflamzz5966
    @gigaflamzz5966 3 ปีที่แล้ว +3

    ❤️

  • @MR-HK-zn8dw
    @MR-HK-zn8dw 3 ปีที่แล้ว

    Can you please please please show how can link Google sheets with html

  • @rajatgupta9578
    @rajatgupta9578 3 ปีที่แล้ว

    single page only with left or right click as page change but screen should have only one page... I mean a book but at time one page only.... is it possible ???

    • @SENAPATIENTERTAINMENT
      @SENAPATIENTERTAINMENT 3 ปีที่แล้ว

      You can do it with checkboxes or add an event listener in javascript

  • @pramodhrajoju9548
    @pramodhrajoju9548 3 ปีที่แล้ว

    Bro may I know which text editor are u using?

    • @franciscangco2664
      @franciscangco2664 3 ปีที่แล้ว

      By the looks of the icon on the top left corner, he is using VSCode.

  • @AnimeThings_
    @AnimeThings_ 3 ปีที่แล้ว +1

    How do you decide that you today you have to upload this idea only?

  • @peoples.say.masoom
    @peoples.say.masoom 3 ปีที่แล้ว +1

    Containing these images also

  • @agamdeepsingh001
    @agamdeepsingh001 3 ปีที่แล้ว

    Sir pls make a tutorial on how to make multiple cards like these or pls link any of your video in the reply

  • @standforlife1
    @standforlife1 3 ปีที่แล้ว

    5:57 9:30

  • @TytusDubel
    @TytusDubel 3 ปีที่แล้ว

    Masta Blasta

  • @jacksonchan9774
    @jacksonchan9774 3 ปีที่แล้ว

    Want to have this BGM

  • @WhiteDevil-yu5ry
    @WhiteDevil-yu5ry 3 ปีที่แล้ว

    How to make this one without hover as a book...

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  3 ปีที่แล้ว

      Follow this th-cam.com/video/NXbplQjN8UM/w-d-xo.html

  • @nikhilpatel9274
    @nikhilpatel9274 3 ปีที่แล้ว

    How i can become member by donating in patreon , i can pay in rupees

  • @peoples.say.masoom
    @peoples.say.masoom 3 ปีที่แล้ว +1

    Please send me that file plz

  • @peoples.say.masoom
    @peoples.say.masoom 3 ปีที่แล้ว +1

    Please Bro can you release the source code file in . ZIP or . RAR or any other compressed file format, Its just a request i am your big fan recently you got an other subscriber and a follower on your channel i am talking about me

  • @samandarjonqudratov9349
    @samandarjonqudratov9349 3 ปีที่แล้ว

    its graet 3d animate