![GridRule](/img/default-banner.jpg)
- 17
- 293 931
GridRule
India
เข้าร่วมเมื่อ 5 ก.ค. 2021
We have a bold mission to make design education accessible, engaging, and actionable for designers around the world.
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
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
Thank you so much for this tutorial! This is very helpful 🙏🏽
NICE CONTENT
Love the pace of your teaching, great job!
Perfect Solution :) thanks for sharing.
Amazing video - subscribed! Please keep up the Bricks Builder tutorials!
Thank you so much! It works beautifully.
Cool effect thx bro 🙏
Thanks ❤
Very nice animation! Thanks for sharing!
Rix😮
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.
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?
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.
That is available in Bricksforge, but I don't see it in the script. Maybe I am missing somehting @@gridrule
I want to organize a homestay in Tirupati and create a good name for the homestay.
Not working on your mail ✉ 🆔
hi sir
Send if there is a context number
FONT NAMES ARE NOT MENTIONED
Omg!! Thank you, I spent so much time trying to do this using interactions and its so simple.
Glad it helped!
How to make these?
how to create a Stack Cards On Scroll in figma
It's helpful 😉
Thank you 😊
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.
I have a very important question. How can I add the code in the divi theme?
You can use a plugin for add custom code in Divi theme if it doesn't have the feature.
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.
Is that possible with Elementor?
Yes, you can do it in Elementor as well.
@@gridrule thanks
outstanding, can you please make a course of designing logos like this?
We have a course on logo design. Check out our website gridrule.com
That's amazing. Do you have other similar resources for Bricks?
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?
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.
Great tutorial! I hope you keep uploading useful tutorials like this regularly.
Thanks, will do!
Great Tutorial, straight to the point. Many thanks, you get my like and my sub!!
Thanks!
Do they have this for Breakdance?
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.
Reedly takeaway
Thank you. please make more bricksforge tutorials.
Keep making these videos
True fan.
Sir too good very nice video
❤
If I was on a site and saw ANY of this on the page I would leave the site immediately!
Any reason why you don't prefer animations on websites?
Nice work!😊
plese more
Very good video!
Thank you, please make events tutorial for pop-up, off-convas and etc
So great, Thank you
Great video :)
Great video! 👏👏
Thank you! :)
Nice thank you
Great tut... well done
Thank you! :)
Well done, so easy!
Thank you! 😊
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.
New video using Bricksforge has been uploaded. Check it out. :)