How to Webflow: Advanced hover effects with Webflow interactions - Tutorial (2020)

Поделиться
HTML-код
  • Опубликовано: 25 янв 2020
  • Here is the finished site:
    evolvedcinema.com
    Join the Pixel Geek Community:
    pixelgeek.community
    -------
    I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
    The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
    -------
    Like what you see? Subscribe here:
    ruclips.net/user/subscription_...
    -------
    / thepixelgeek
    / pxlgk
    pixelgeek.co
  • ХоббиХобби

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

  • @garyvoigt321
    @garyvoigt321 4 года назад +7

    I'm loving the new, slightly more advanced tutorials. It really shows off what you can achieve in webflow.

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

      glad you enjoyed it :) More of these types of tutorials are coming soon.

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

      @BRadsDrumTheater yay! Glad you're learning a lot. Tell me what else you'd like to learn.

  • @niekwulkeahealth6383
    @niekwulkeahealth6383 5 месяцев назад

    Fantastic Tutorial Nelson! Thank You!

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

    Thank you for sharing! Great design.

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

    This was exactly what I needed! Thank you!

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

    fab stuff thanks for sharing !

  • @Ru-Polwatta
    @Ru-Polwatta 4 года назад +2

    Well explained! Thank you!

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

      You're welcome 😁👍

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

    Beautiful! Great video!

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

      Thank you very much!

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

    I love your work , thanks to you very much.

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

      Thanks 😁🙇🏽‍♂️

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

    Great Content thats what i like to see!!

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

      thanks! :D Happy to hear you like it.

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

    I agree with Gary below - nice to see how to push Webflow animation capabilities

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

    fantastic

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

    Hey Nelson, awesome video as always! In one of your other videos you’d mentioned doing a video about using Udesly, and I would like to second that. Especially best practices for setting up attributes!

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

      I got udesly on my list. 😁👍

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

      I second that and thank you

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

    wow....I loveit, How much fast like a flash ...wow

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

    Hi Nelson, digging this 👍🏽 So, in regards to the video, they just have to be its original size and no need to place in column or grid but they have to be hidden right?

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

    This is great and nearly perfect for what I wanted to achieve. My issue is that my items are in a cms collection and the hover only shows the same (first) image or video so is there a way around that if they are dynamic posts? Basically to link the hover to the actual image of that item in the cms collection.

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

    Hey! I know this is an old video, but did you use different videos to appear for each column or was it the same background video? How did you achieve multiple videos if you did use multiple?

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

    i did same thing in last week, but i played with images rather than vids. great vid btw.

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

      hey Alex, I was wondering how you did it with images. I'd appreciate the help, thanks.

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

      @@Okimoto6501 Hey, I just replace the text with images and give the images some specific width. This is how I did it. Let me know if you need more help. Cheers!

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

    Hey, I cant seem to make the background video responsive - make it fill the whole of the section/grid. It is cut off. Is there a way round this. Thankyou.

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

    I really like this tutorial as well. Does the site need to be published before the videos are displayed?

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

      The videos should play in the Webflow designer tool. If not, try publishing the page and testing it outside of Webflow.
      Hope this helps 😁

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

    Hi Nelson, great video, thanks for all the effort you go to! Just a quick question on your ui. When you made it responsive for tablet and mobile, you kept the animations as hovers. Is this something you do often? Or would you usually change the trigger to click on/off for tablets and mobile?

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

      Hovers work like click triggers on mobile

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

      @@pixelgeek this comment was super helpful thanks mate!

  • @elm21
    @elm21 6 месяцев назад

    Can u show us how to specify the hover area like make a 1px hover area
    ?

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

    Hello Sir, I'm facing a problem,.. on the color box affect class is working perfectly but when I'm making it for text-box warpper it is not working,.. I had to use selected elements.. can youu please give me solution for this?

  • @hal-zeitlin
    @hal-zeitlin 4 года назад +2

    Keep making more for that site you made please. #vladsmydad

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

      i didn't know Vlad had a son. 🤔

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

    your a Crack! the videos (services 1-4) have a Height of 100%?