GridRule
GridRule
  • 17
  • 293 931
How To Create Expandable Image Cards On Hover In Webflow
Learn how to create expandable cards on hover in Webflow. You can use this to create an image gallery or cards that will expand in size on hover.
This effect is built entirely using Webflow without any custom code or interactions.
---------------------------------------------------------------------------------------------------------
Thanks a lot for watching! 😁
Please leave a like and Subscribe to stay updated.
Drop a comment and share if you liked it. 🗨️
---------------------------------------------------------------------------------------------------------
❤️ Subscribe: bit.ly/gridruleyoutube
👉 Website: gridrule.com/
✍️ - GridRule Blog: gridrule.com/blog/
👉 Instagram: gridrule
👉 Twitter - gridrule
---------------------------------------------------------------------------------------------------------
#webflow #webflowtutorials #hovercards #hovereffect #expandingcards #imagehover #hoveranimation #webflowanimation #webfloweffects
มุมมอง: 2 235

วีดีโอ

5 AWESOME GSAP Animations With BricksForge In 10 Minutes
มุมมอง 5Kปีที่แล้ว
Learn how to create 5 gorgeous GSAP animations with BricksForge in Bricks Builder in just 10 minutes. In this tutorial, I will teach you how you can use the BricksForge plugin to create beautiful GSAP animations in Bricks Builder without writing any code. Learn more about BricksForge here: bricksforge.io/ Thanks a lot for watching! 😁 Please leave a like and Subscribe to stay updated. Drop a com...
3 Best Figma AI Plugins For Web Designers In 2023
มุมมอง 436ปีที่แล้ว
Want to speed up your design workflow and become a better and more efficient web designer? You have to check out these Figma AI plugins that will help you work faster and smarter when designing prototypes for websites. Here are the links to the plugins mentioned in the video - 👉🏻 Scribe AI - www.figma.com/community/plugin/1181999195063138245/Scribe-AI 👉🏻 Avatars Generator - www.figma.com/commun...
GSAP Text Reveal Animation In WordPress (Using Bricks Builder)
มุมมอง 2.2Kปีที่แล้ว
Learn how to create this awesome split text reveal animation using GSAP in WordPress. You can find the script here: github.com/vallafederico/hacking-webflow/blob/master/src/staggerText/readme.md Thanks a lot for watching! 😁 Please leave a like and Subscribe to stay updated. Drop a comment and share if you liked it. 🗨️ ❤️ Subscribe: bit.ly/gridruleyoutube 👉 Website: gridrule.com/ ✍️ - GridRule B...
How To Stack Cards On Scroll In WordPress (Using Bricks Builder)
มุมมอง 6Kปีที่แล้ว
Learn how to stack cards on scroll in WordPress using the Bricks Builder. With this tutorial, you'll be able to create a stacking card effect on your website and impress your visitors. Thanks a lot for watching! 😁 Please leave a like and Subscribe to stay updated. Drop a comment and share if you liked it. 🗨️ ❤️ Subscribe: bit.ly/gridruleyoutube 👉 Website: gridrule.com/ ✍️ - GridRule Blog: gridr...
40+ Best Design Resource Websites In Under 20 MINUTES!
มุมมอง 633ปีที่แล้ว
Do you go through countless websites while working on a project to find the perfect design resource? It's often tiring and overwhelming to look through hundreds of websites just to find the right font, mockup, or illustration. In this video, we share some of the best design resource websites where you can find all the best resources for your projects. Here are the links to all the websites shar...
Notion for Designers: The Ultimate Workspace For Designers (2022)
มุมมอง 1.6Kปีที่แล้ว
This video goes over the Notion workspace we use to manage our design projects! Grab the NOTION TEMPLATE: bit.ly/notionfordesigners If you're overwhelmed with managing multiple design projects at once, you need to take a closer look at your workflow. Oftentimes, your workflow is the reason that's stopping you from working efficiently. Managing design files, creating contracts & proposals, havin...
30 Best Fashion Logos | Clothing Brand Logo Design Ideas
มุมมอง 69K3 ปีที่แล้ว
Check out these creative fashion logo designs. You can find some inspiration through these logos for your own clothing brand logo design. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Fashion logo designs? 👉 Check out this list on the GridRule blog: #GridRule #LogoDesign #LogoDesignIdeas Want to learn the pro...
30 Best Gym Logos | Fitness Logo Design Ideas & Inspiration
มุมมอง 12K3 ปีที่แล้ว
Here are some of the best gym logo design ideas for health and fitness freaks. These health, gym, and fitness logo designs can help you design more creative logos for your next fitness logo design project. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Gym logo designs? 👉 Check out this list on the GridRule bl...
50 Best Wordmark Logos | Lettermark Logo Design Ideas & Inspiration
มุมมอง 9K3 ปีที่แล้ว
Here are some of the best wordmark logo ideas. Wordmark logos are very popular and these creative wordmark and lettermark logo designs will open your mind to more creative logo design ideas. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Wordmark logo designs? 👉 Check out this list on the GridRule blog: #GridR...
60 Best Photography Logos | Photographer Logo Design Ideas & Inspiration
มุมมอง 27K3 ปีที่แล้ว
Are you looking for the best photography logo ideas? Here are the best photography logo design ideas that will help you come up with your own photography logo ideas. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Photography logo designs? 👉 Check out this list on the GridRule blog: #GridRule #LogoDesign #LogoD...
60 Best Vintage Logos | Retro Logo Design Ideas & Inspiration
มุมมอง 7K3 ปีที่แล้ว
Here are some of the best vintage logo ideas. Vintage logos are coming back in trend and you can take inspiration from these retro logo designs to create your own logo. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Vintage logo designs? 👉 Check out this list on the GridRule blog: #GridRule #LogoDesign #LogoDe...
65 Best Gaming Logos | Gaming & eSports Logo Ideas & Inspiration
มุมมอง 3.2K3 ปีที่แล้ว
Looking for some the best gaming logo ideas? Here are some awesome and creative gaming and esports logos that will get your creative juices flow. You can create such awesome gaming logos for yourself too! If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Gaming logo designs? 👉 Check out this list on the GridRule ...
100 Best Motion Logos | Creative & Cool Logo Animations Ideas
มุมมอง 29K3 ปีที่แล้ว
Here are some of the best motion logo ideas and inspiration. These creative animation logos can serve you as an inspiration for animating your own logos. Motion logos are very popular and trendy and these creative logo animations are examples of how creative you can get with adding motion to your logos. If you liked this video, do give us a like and subscribe for more logo design ideas and insp...
35 Best Medical Logos | Creative Medical Logo Ideas
มุมมอง 30K3 ปีที่แล้ว
In this video, we're going to share some of the best medical logo design ideas. These medical logos can serve as an inspiration for you to design medical or any health-related logos for your clients. If you liked this video, do give us a like and subscribe for more logo design ideas and inspiration. Looking for the source of these Medical logo designs? 👉 Check out this list on the GridRule blog...
100 Best Restaurant Logos | Restaurant & Food Logo Design Ideas
มุมมอง 84K3 ปีที่แล้ว
100 Best Restaurant Logos | Restaurant & Food Logo Design Ideas
35 Negative Space Logo Ideas | Clever & Creative Negative Space Logo Designs
มุมมอง 6K3 ปีที่แล้ว
35 Negative Space Logo Ideas | Clever & Creative Negative Space Logo Designs

ความคิดเห็น

  • @RonnieMbugua
    @RonnieMbugua วันที่ผ่านมา

    Thank you so much for this tutorial! This is very helpful 🙏🏽

  • @GoodUser-WrathfulArchfiend
    @GoodUser-WrathfulArchfiend 19 วันที่ผ่านมา

    NICE CONTENT

  • @jamesl.223
    @jamesl.223 หลายเดือนก่อน

    Love the pace of your teaching, great job!

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

    Perfect Solution :) thanks for sharing.

  • @farhan-app
    @farhan-app 2 หลายเดือนก่อน

    Amazing video - subscribed! Please keep up the Bricks Builder tutorials!

  • @horatioand
    @horatioand 2 หลายเดือนก่อน

    Thank you so much! It works beautifully.

  • @danield8606
    @danield8606 2 หลายเดือนก่อน

    Cool effect thx bro 🙏

  • @dynamic-homepages
    @dynamic-homepages 3 หลายเดือนก่อน

    Thanks ❤

  • @user-cr2sp7my8h
    @user-cr2sp7my8h 3 หลายเดือนก่อน

    Very nice animation! Thanks for sharing!

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

    Rix😮

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

    Thank you for the content, I just don't understand why the animations do not is linked to scroll Trigger, I mean, frame by frame, the animations just go freely through the page, scrolling effect, for me, just make sense if the animation respond to scroll.

  • @petarpavlov
    @petarpavlov 5 หลายเดือนก่อน

    Great tutorial! Is it possible to trigger the animation for each object even though it is tied to a class? Let's say I have a class .card-title and there are mutliple titles with it. Can I define it whenever an object with that class comes into view to trigger it?

    • @gridrule
      @gridrule 5 หลายเดือนก่อน

      Thanks! Yes, you can trigger each object separately. If you're applying the animation to a class, enable the "Handle triggers separately" toggle and it will trigger each animation separately.

    • @petarpavlov
      @petarpavlov 5 หลายเดือนก่อน

      That is available in Bricksforge, but I don't see it in the script. Maybe I am missing somehting @@gridrule

  • @prakash70707ify
    @prakash70707ify 5 หลายเดือนก่อน

    I want to organize a homestay in Tirupati and create a good name for the homestay.

  • @prakash70707ify
    @prakash70707ify 5 หลายเดือนก่อน

    Not working on your mail ✉ 🆔

  • @prakash70707ify
    @prakash70707ify 5 หลายเดือนก่อน

    hi sir

  • @prakash70707ify
    @prakash70707ify 5 หลายเดือนก่อน

    Send if there is a context number

  • @MUHAMMADTAYYAD901
    @MUHAMMADTAYYAD901 6 หลายเดือนก่อน

    FONT NAMES ARE NOT MENTIONED

  • @sallygosbert9886
    @sallygosbert9886 6 หลายเดือนก่อน

    Omg!! Thank you, I spent so much time trying to do this using interactions and its so simple.

    • @gridrule
      @gridrule 5 หลายเดือนก่อน

      Glad it helped!

  • @feedingthefurries9076
    @feedingthefurries9076 6 หลายเดือนก่อน

    How to make these?

  • @user-nd1gb1pi3f
    @user-nd1gb1pi3f 6 หลายเดือนก่อน

    how to create a Stack Cards On Scroll in figma

  • @JUST_DO_IT-77777
    @JUST_DO_IT-77777 7 หลายเดือนก่อน

    It's helpful 😉

  • @JohnsonAugustine
    @JohnsonAugustine 7 หลายเดือนก่อน

    Thank you 😊

  • @marcosansalone
    @marcosansalone 7 หลายเดือนก่อน

    I'm testing with Bricks and the animation works fine, however, when I see the page the first "micro second" I see the entire text and then the animation is running. interesting, just realised that this issue is only on Chrome.

  • @emilianodesimone6329
    @emilianodesimone6329 8 หลายเดือนก่อน

    I have a very important question. How can I add the code in the divi theme?

    • @gridrule
      @gridrule 8 หลายเดือนก่อน

      You can use a plugin for add custom code in Divi theme if it doesn't have the feature.

  • @hariswami4827
    @hariswami4827 8 หลายเดือนก่อน

    Thank you so much. This is exactly what I have been looking for. Usecase based. Can you please consider making tutorials of all the features with 5 samples like this using bricksforge? That'd be wonderful. Subscribed.

  • @marcosansalone
    @marcosansalone 9 หลายเดือนก่อน

    Is that possible with Elementor?

    • @gridrule
      @gridrule 9 หลายเดือนก่อน

      Yes, you can do it in Elementor as well.

    • @marcosansalone
      @marcosansalone 7 หลายเดือนก่อน

      @@gridrule thanks

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

    outstanding, can you please make a course of designing logos like this?

    • @gridrule
      @gridrule 9 หลายเดือนก่อน

      We have a course on logo design. Check out our website gridrule.com

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

    That's amazing. Do you have other similar resources for Bricks?

  • @AnthonyPetremant
    @AnthonyPetremant 11 หลายเดือนก่อน

    I have a question. First, thank you for this tutorial! I would like an image to be in the expandable position by default and when I hover over another image it will collapse. Do you have a solution?

    • @gridrule
      @gridrule 11 หลายเดือนก่อน

      You can try that by adding a div on top of the image you want to hover. So, when you hover over that div (which is over the image), the expandable image will collapse.

  • @mohammadsami007
    @mohammadsami007 11 หลายเดือนก่อน

    Great tutorial! I hope you keep uploading useful tutorials like this regularly.

    • @gridrule
      @gridrule 11 หลายเดือนก่อน

      Thanks, will do!

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

    Great Tutorial, straight to the point. Many thanks, you get my like and my sub!!

    • @gridrule
      @gridrule 11 หลายเดือนก่อน

      Thanks!

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

    Do they have this for Breakdance?

    • @gridrule
      @gridrule 11 หลายเดือนก่อน

      Bricksforge is specifically made for Bricks Builder. But you can try motion.page plugin which is quite similar and works with majority of page builders.

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

    Reedly takeaway

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

    Thank you. please make more bricksforge tutorials.

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

    Keep making these videos

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

    True fan.

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

    Sir too good very nice video

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

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

    If I was on a site and saw ANY of this on the page I would leave the site immediately!

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

      Any reason why you don't prefer animations on websites?

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

    Nice work!😊

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

    plese more

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

    Very good video!

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

    Thank you, please make events tutorial for pop-up, off-convas and etc

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

    So great, Thank you

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

    Great video :)

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

    Great video! 👏👏

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

      Thank you! :)

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

    Nice thank you

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

    Great tut... well done

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

      Thank you! :)

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

    Well done, so easy!

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

      Thank you! 😊

  • @Nima-Norouzi
    @Nima-Norouzi ปีที่แล้ว

    Hi and thanks bro, yeah maybe use Bricksforge to make some nice animations. Unfortunately there are not many tutorials on how to use this plugin as it has very nice features.

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

      New video using Bricksforge has been uploaded. Check it out. :)