Really fun CSS hover effects

Поделиться
HTML-код
  • Опубликовано: 3 окт 2024

Комментарии • 246

  • @vladimirmikulic7860
    @vladimirmikulic7860 5 лет назад +59

    Finally, now I understand how those animations are made. Thank you.

  • @cl_toxicness
    @cl_toxicness 2 года назад +9

    I must say this channel is amazing. The whole vibe of tutorials is amazing and it makes CSS so amazing. Keep up the good work.

  • @PaulMountney
    @PaulMountney 3 года назад +12

    I love your enthusiasm! It’s like you live and breath for this stuff. I just wish I had someone like you when I started to use CSS!

  • @eddavidbrandt
    @eddavidbrandt 4 года назад +12

    Will be teaching courses on HTML and CSS soon. The way you explain processes in your videos has made it easier for me to take what I’ve learned intuitively - from years of randomly creating - and translating into clear (and proper) context for students. Thanks!

  • @somenothings
    @somenothings 4 года назад +8

    These r dope, I really like how u take the time to figure things out out loud instead of just coding it up from a script- I feel like it gives great insight on how to think as a designer.

  • @ElementoryMyDearWatson
    @ElementoryMyDearWatson 4 месяца назад +1

    Wow, I would have probably spent weeks trying to figure out how to do that with JS. Really clever, many thanks.

  • @illegaldream
    @illegaldream 9 месяцев назад +1

    man you help a lot. You are a perfect teacher. Love you. I wish I meet you one day.

  • @livinglies167
    @livinglies167 5 лет назад +1

    that's what I love about ur methods and CSS..it is the most bang for the buck...more or less-simple, but amazingly effective and practical...not overly complicated...

  • @rutunjparikh2775
    @rutunjparikh2775 3 года назад +1

    0:30 You have instilled Love for CSS in me. Amazing tutorial. Thanks! I was not a design guy but I am starting to like it!

  • @RealDarkSeaKingg
    @RealDarkSeaKingg 5 месяцев назад +1

    Your Videos Are So Good , These Helped Me To Understand CSS I REALLY APPRECIATE IT

  • @WhiteoutMonster
    @WhiteoutMonster 5 лет назад +2

    I just started learning html and css a week ago. I love it! Playing with opacity and background images, to making link homepages and login boxes, it's all fun. Next I need to learn javascript so I can make my page do more.

  • @blonduose
    @blonduose 4 года назад +2

    Thanks, this was really fun, and it's nice doing it yourself and making it work, I think position and z-index are in my brain for good now, and I actually understand the hover property a LOT better now than I used to

  • @JohnMcCormack
    @JohnMcCormack 5 лет назад +6

    Elegantly explained and demonstrated, as always.
    Thank you.

  • @biomcanx1
    @biomcanx1 5 лет назад +1

    Learned about the z-index never knew to set the parent to 1 to get the item behind the text. Thanks again, great video and information Kevin!

    • @KevinPowell
      @KevinPowell  5 лет назад

      No problem at all, super glad you learned something!

  • @rebelmachine88
    @rebelmachine88 5 лет назад +4

    Oh man, this was AWESOME Kevin. Definitely going to use some of these!

  • @khazza930
    @khazza930 4 года назад +2

    just stumbled upon this channel a few days ago and started watching... man i love it. Especially loving all the little gems you cover while covering the main topic.
    CSS is the thing i do the least, as I've been mainly a back-end developer for the past 5 years, so this very helpful
    thank you so much for these videos :)

  • @nathancornwell1455
    @nathancornwell1455 5 лет назад +1

    awesome video...showing us in action but also explaining in context WHY you are doing what you do . The why part is the part missing in most people's videos. I'll definitely be checking out the rest of your content and look forward to learning a whole lot more!

    • @KevinPowell
      @KevinPowell  5 лет назад

      Glad you like my approach Nathan!

  • @romitmohane4891
    @romitmohane4891 3 года назад +12

    "We need a content on there with no content in it", that's Bollywood!

  • @blokche_dev
    @blokche_dev 5 лет назад +2

    Still great content! Thank you Kevin.
    I really enjoy these videos where it's not only about css but where design is concerned too.

    • @KevinPowell
      @KevinPowell  5 лет назад +2

      Glad you liked it! Always more fun when we're doing some design stuff too :)

  • @edwinloaiza1017
    @edwinloaiza1017 Год назад

    kevin, thanks you for your time, your channel is amazing.

  • @sobeyyy
    @sobeyyy 4 года назад +2

    Thanks for the video you have a really fun personality. It makes learning even more fun :)
    Keep up the awesome content!

  • @emmyleke7049
    @emmyleke7049 2 года назад

    Needed this today. Thanks Kev. I love you.

  • @kiwicrafter
    @kiwicrafter 4 года назад

    While doing it while watching your video. I thought of having the transform:scaleX(0); set to 0 and low and behold you did the same. Great stuff many minds think alike indeed.

  • @mudyeet_
    @mudyeet_ 4 года назад

    You helped me a lot in the project I made just 2 days ago, thanks a lot!

  • @victoria6196
    @victoria6196 5 лет назад +2

    Awesome video. I need to use pseudo elements more often!
    I started watching your videos a while before I attended a coding bootcamp, they have been so helpful and still are! 🤗 thank youuu

  • @MilanB
    @MilanB 5 лет назад +10

    More of these animation things, please

  • @Coco-ii2pu
    @Coco-ii2pu Год назад

    I'd be nowhere with CSS if it weren't for Kevin. Bless you

  • @ryaaan0751
    @ryaaan0751 2 года назад

    JUST WOW! Thanks for this!

  • @shubh4723
    @shubh4723 4 года назад

    Amazing video Kewin. I have been looking for it for long time. Finally got it in your video. Thanks and keep making videos like this..

  • @RoKoFoRu
    @RoKoFoRu 4 года назад

    Just in love with ur SHORT AND INFORMATIVE tuts! Nice maneer not to waste time. And whats more - the chanel is full of COOL STUFF.

  • @joaomarcelo4940
    @joaomarcelo4940 8 месяцев назад +1

    this video is gold

  • @ronarmengol1677
    @ronarmengol1677 2 года назад

    Fantastic stuff Kevin love from Zambia

  • @mohammedmudassir837
    @mohammedmudassir837 3 года назад

    was always curious how those hover animations were made, now i know it.. Thanks 🥳🤩

  • @devon.dulaney
    @devon.dulaney 5 лет назад

    Thanks for showing us how much fun CSS really is!!!

  • @XMattingly
    @XMattingly 5 лет назад +26

    "Who's motorcycle is this?"
    "It's X, Y and Zed's *chopper*, baby."
    "Who's Zed?"
    "Zed's dead, baby. Zed's dead."

  • @salahuddin13
    @salahuddin13 5 лет назад +2

    I am a big fan of you!
    Really you are awesome.
    Love you✌

  • @mounakarym3912
    @mounakarym3912 Год назад

    thank you sir for helping us improve

  • @DevAbu97
    @DevAbu97 2 года назад

    Perfect, big respect

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 5 лет назад

    I learnt a lot by watching this video. Thank you very much.

  • @chlouis-girardot
    @chlouis-girardot 5 лет назад

    Big thanks Kevin! I'll use that right now!

  • @RariYeahh
    @RariYeahh 3 года назад +1

    The love for CSS is Happening but how can we use this in Figma! What are THOSE tricks?! Would love to learn hovering effects of the latest kind

  • @joeldcanfield_spinhead
    @joeldcanfield_spinhead 5 лет назад

    When I create book trailers for clients, I always play with transitions like this. I never thought I'd be able to do it with css. Very cool.

    • @patriotact3729
      @patriotact3729 4 года назад

      Please, how can i create a book trailer for clients please?

    • @joeldcanfield_spinhead
      @joeldcanfield_spinhead 4 года назад

      @@patriotact3729 Any video editing tool. Davinci Resolve is massively powerful and takes a while to learn. iMovie on Mac and Movie Maker on Windows are both easy, though a bit limited. Combine video, audio, photos, text.

    • @patriotact3729
      @patriotact3729 4 года назад

      @@joeldcanfield_spinhead thanks for quick reply. I'll try movie maker. Thanks again

  • @totalolage
    @totalolage 4 года назад

    I can't help but feel that clip-path would have saved so much woe with that text colouring.

  • @joshgordon7299
    @joshgordon7299 3 года назад

    Man your videos have helped a ton thank you

  • @crooker2
    @crooker2 5 лет назад

    Another great video. Thanks Kev!

  • @xpfe5zrm
    @xpfe5zrm 4 года назад

    Your channel is something i've been seeking for a very long time: cool css stuff. Thanks for the great content!

  • @L0kacitron
    @L0kacitron 2 года назад

    I think I've never come across a video that had not at least one dislike. :O This video is so amazing.

  • @sojibcj4607
    @sojibcj4607 4 года назад

    you are a good teacher.
    100% helpful.
    thank you very much.

  • @e.m.janssen3638
    @e.m.janssen3638 Год назад

    Such a helpful video, thank you.

  • @nazeerhaidari827
    @nazeerhaidari827 2 года назад

    I learned alot from this video Thank you very much !

  • @joydevmaity1194
    @joydevmaity1194 5 лет назад

    This is awesome.
    This is really helpful.
    Sir, many many thanks for this video.

  • @aqua123670
    @aqua123670 5 лет назад

    i love css and i love this kind of video. please do more !

  • @nour-eddineoumakhlouf5296
    @nour-eddineoumakhlouf5296 4 года назад

    "display:relative" what a lovely mistake! it gives me the strength to carry on learning code. Great job!

  • @anujpartihar
    @anujpartihar 3 года назад

    Brilliant videos sir! So helpful.

  • @shaktisarkar8793
    @shaktisarkar8793 3 года назад

    Man, you are a css god!!🔥♥️

  • @dennisdovziy2775
    @dennisdovziy2775 5 лет назад +6

    Nice job, Kevin! Thank ypu from Ukrane)

  • @J90JAM
    @J90JAM 3 года назад

    If you want to use the button effects on a pill style button, just add "overflow:hidden" to the button class.

  • @alex-rh4mn
    @alex-rh4mn 2 года назад

    ahh so helpful you are a blessing, may you live in prosperity 💕

  • @ZianiLounes
    @ZianiLounes 4 года назад

    Awesome tutorial, very easy to learn!
    Thank you!

  • @Julian-xo7vj
    @Julian-xo7vj 2 года назад

    You are the Andrew Kramer of the CSS world!

  • @thiagoterceiro9902
    @thiagoterceiro9902 5 лет назад

    Amazing video Kevin! You're an awesome teacher! Thanks

    • @KevinPowell
      @KevinPowell  5 лет назад

      Thanks Thiago, glad you liked it!

  • @akhil_sarikonda
    @akhil_sarikonda 5 лет назад

    Nice Work Kevin!

  • @kalidoss7234
    @kalidoss7234 4 года назад

    Thank you Kevin

  • @ob-dbsstudent8132
    @ob-dbsstudent8132 5 лет назад

    Nice work kev

  • @alisamsami7995
    @alisamsami7995 3 года назад

    That was amazing! I realy like this . It can solve lots of problems👍👍👍👍👍

  • @bubaimondal3651
    @bubaimondal3651 2 года назад

    I think i've fallen in love with css.

  • @havayu557
    @havayu557 3 года назад

    Thanks Kevin from Russia

  • @edehchinedu4554
    @edehchinedu4554 Год назад

    thanks kelvin love from Nigeria

  • @total_tollywood_entertainment
    @total_tollywood_entertainment 2 года назад

    Thank you so much sir.

  • @ck0024
    @ck0024 5 лет назад +16

    *Video starts at **3:34*

  • @pedrorqueiroz
    @pedrorqueiroz 4 года назад +3

    Hey Kevin! Cheers from Brazil! I love your videos, they are really helpful! I noticed that at the end of the video, the card effect was a little bit different than the one you showed at the beginning. I wanna make the effect to be kinda symetrical, so the white thing goes in after the orange and goes out before. Do you know how can I do it?

  • @norvisnorvis7592
    @norvisnorvis7592 5 лет назад

    Thank you so much!!! This really help build some interactives that Im trying to code. Could you please answer a question for me? Can you build a outside of a section?

    • @KevinPowell
      @KevinPowell  5 лет назад

      You sure can. Before we had sections, everything was divs :)
      A div has no semantic meaning, it's just a "division" of content that we can use to organize and group things together, but you can basically use them for anyhting.

    • @norvisnorvis7592
      @norvisnorvis7592 5 лет назад

      @@KevinPowell Thank you Kevin.... i just have one more question about sections... if i could pay you, i would.... ive been investigating but i couldn't find the answer to my question. Can you nest a inside a .
      Ex.

      Thank you 😊. Let me know how i could better support your channel.

    • @norvisnorvis7592
      @norvisnorvis7592 5 лет назад

      These sections would not have headings,asides, or anytype of html code in them. Basically a section ==$0.

  • @Valky1954
    @Valky1954 5 лет назад

    Thanks for the cool effects :)

  • @benlivingstone8272
    @benlivingstone8272 3 года назад

    that's weird I was just watching you the other day for another subject on another account. subbed

  • @zhjiyun
    @zhjiyun 5 лет назад +1

    Parent relative, Child absolute.
    Am I the only one all the way staring at the kid painting? Feels there is a little story in it. haha.
    Thanks Kevin!

    • @KevinPowell
      @KevinPowell  5 лет назад +2

      Haha, just one of my kid's drawings. He makes me tons, but it's one of my favorites

  • @kf88743
    @kf88743 5 лет назад

    As always.......great info.

  • @Law1781
    @Law1781 5 лет назад

    Dude, that is just amazing :D
    So good having subscribed your channel (:

    • @suzamuidesign
      @suzamuidesign 4 года назад

      ruclips.net/video/yyDey1Iid0c/видео.html

  • @viktorbublic
    @viktorbublic 5 лет назад

    I really love your channel, learned a lot and it helped me in my business. One question - what do you think about making those effects with gradients? No need for pseudo elements with gradients, but on the other hand i do believe css animations should be done with transforms as much as possible.

    • @KevinPowell
      @KevinPowell  5 лет назад

      It would solve the issue with the underline breaking on the links, if the link goes over two lines (I think).

  • @pekkerspye7498
    @pekkerspye7498 3 года назад

    you are two good man I really like your videos because your video is really usefull.

  • @udaykulkarni5639
    @udaykulkarni5639 5 лет назад

    Your videos actually made get my lazy ass up and work on my css skills.. Lmao. You are a gem 💎

  • @errolfrancois2395
    @errolfrancois2395 7 месяцев назад

    @KevinPowell. Just curious... Maybe the length of the chracters with the hover effect can be extrapolated and used to calculate the transform timing, so that the spedd looks the same accross any amount of characters... Just a dumb idea...

  • @guillermoandradaFSD
    @guillermoandradaFSD 3 года назад

    24:32 Did you said "Content is 'nada' "? Thanks for the video. It's amazing.

  • @nadicadizdarevic2835
    @nadicadizdarevic2835 3 года назад

    Thanks !

  • @dreamydroop5588
    @dreamydroop5588 3 года назад

    who else noticed his star wars drawing 0:24
    Edit : It's Kinda nice

  • @armanx2
    @armanx2 4 года назад

    Thank you sir!

  • @mswondo
    @mswondo 11 месяцев назад

    I try use =>
    elm:hover,
    elm:focus {
    }
    Try to accomodate that on mobile no hover effect

  • @sumitsahu2338
    @sumitsahu2338 9 дней назад

    Kevin you are amazing

  • @seveto3911
    @seveto3911 5 лет назад

    You are good teacher. 🏅🎖
    Thx You from Poland! 🇵🇱🌍
    Really good Job! 👍

  • @coffee7740
    @coffee7740 2 года назад

    thank you!!

  • @chadrackkyungu1186
    @chadrackkyungu1186 4 года назад

    That was helpful thanks

  • @Blaineworld
    @Blaineworld 5 лет назад

    What really succs is that I would probably enjoy watching this video but i already know how to do these things.

    • @KevinPowell
      @KevinPowell  5 лет назад

      Hopefully next time I can do something new :D

  • @techtips4019
    @techtips4019 5 лет назад

    I love CSS too . it's amazing and fun to us.

  • @priyanshusharma6763
    @priyanshusharma6763 4 года назад

    It's really helpful to me thank you very much :D

  • @RahulPawa
    @RahulPawa 3 года назад

    When dealing with the color transition, he talked about color not being as good for performance as scale or opacity....could doing a transition on opacity achieve the same effect as what he got with the color transition?
    Edit: I just discovered this channel a few days ago and I'm loving the content as someone who needs to learn CSS for my job. I'm getting a lot of helpful tips, and I'll be coming back for more.

  • @murat2050
    @murat2050 5 лет назад

    Thank you.

  • @ShadiMuhammad
    @ShadiMuhammad 5 лет назад

    That's Amazing. 👌

  • @oljaa9952
    @oljaa9952 2 года назад

    Thaks! :*

  • @chome4
    @chome4 5 лет назад

    Hovering is less of a thing nowadays because of 'touch' devices, but it's still good to include it just in case!

    • @KevinPowell
      @KevinPowell  5 лет назад +1

      Yup, but it's also about understanding how all this stuff works, plus it's fun to do :D. And since a few people brought this up, I'll do a video taking advantage of this, but using a touch event instead!

  • @techtips4019
    @techtips4019 5 лет назад

    fantastic video , you are the best .

  • @dreah8335
    @dreah8335 4 года назад +1

    Where is this alleged article about transitions and transforms that you recommend we read? I do not see it linked in the description.