Discover the best webdevforyou websites created by professional designers. Get inspired and start planning your perfect webdevforyou web design today!

WebDev For You

Let's work with the hover state in daily interaction #8!

This demo showcases an image panel reveal using flexbox and hover states.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #8

Welcome to daily interaction #105!

This demo showcases a recipe card animation on hover. When hovering over the card the image becomes full height, and the card moves forward on the z-axis. The card was placed in a wrapper with a perspective applied to it to bring the card forward. Also a timer icon with the time it takes to create each recipe shows in the upper-right hand corner when hovering. This could be a great recipe card for a food blog.

Happy Webflowing!

Inspired by: https://codepen.io/veronicadev/pen/WJyOwG

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #105

Welcome to Daily Interaction #133.

This demo showcases a parallax card animation on mouse move.

With this effect a card rotates on mouse move, and the image inside the card rotates and moves as well to create the effect of the image moving inside of the card. A caption also appears when hovering over the card. The card is in a 3d-wrapper with a child perspective applied to it to give the card a 3d effect as it moves.

Inspired by: https://codepen.io/andymerskin/pen/XNMWvQ

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #133

Hi Everyone! Here is an Architecture Magazine layout I built in Webflow to showcase Grid 2.0 and Flexbox. 

The design is by Juraj Masar. Here is his Dribbble page: https://dribbble.com/masar_official

Here is the video tutorial on how I created this layout in Webflow: https://www.youtube.com/watch?v=Oc4HHJ--KHo

WebDev For You - Architecture Magazine Website

Hi everyone! I built this website from a design concept by Zak Steele-Eklund from Studio VØR. Here is their dribbble page: https://dribbble.com/studiovor

The designs by Studio VØR have a lot of great illustrations and animations, so it was fun building this in Webflow to showcase the power of Webflow, and just how much you can do with it :).

Here is a video tutorial of how I built the website:
https://www.youtube.com/watch?v=-R9UO_eNQDg

Happy Webflowing :).

webdev-for-you-krai-by-studio-vor

Welcome to daily interaction #98!

This demo showcases a product card animation on hover. This can be a great way to showcase your products for your Ecommerce store. When you hover over the card the title of the product appears, and a few icons and the price stagger in from the bottom. There is a cart icon that can be used to add to cart, an eye icon which can link to the product page, and a heart icon that can link to a counter of some sort. All these icons can be changed as well or replaced with something else.

What's great about these cards is that you can paste them in an Ecommerce collection list and link all the content straight from the Webflow CMS! Amazing!

Enjoy :).

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #98

Welcome to Daily Interaction #128.

This demo showcases a project card animation on hover.

With this effect a panel rotates in from the left to reveal more information about the image, and the image also slides to the right, as if to make room for the panel.

The effect was achieved by placing an image wrapper and a content wrapper within a wrapper with a child perspective applied to it. The content wrapper was set to 50% within the 3d-wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to an overflow of hidden so that when the image slides to the right you don't see it beyond the bounds of the image wrapper. In interactions I rotated the content wrapper from -90 degrees to 0 degrees, and moved the image to the right 50%.

Inspired by: https://tympanus.net/Tutorials/CaptionHoverEffects/index4.html

https://www.webdevforyou.com/

WebDev For You - Daily Interaction #128

Welcome to Daily Interaction #135.

This demo showcases a project card animation on hover.

With this effect the title and caption move on hover. A "View Project" appears and moves down with an underline animation. There is also a cover overlay that moves and appears from the upper-left on hover.

This effect was achieved by creating a card wrapper and placing the color overlay inside of it with a position of absolute and full. Then a text wrapper was added to the card wrapper in the center with a heading, text block, and view project text block. The 'view project' text and underline were added inside of another wrapper. Then with interactions I had the different elements move and the underline scale.

Inspired by: https://www.everess.fr/

There will be no daily interactions for a while as I am currently working on a few other projects. Stay tuned for the new projects!

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #135

Welcome to Daily Interaction #127.

This demo showcases a category card animation on hover.

With this effect a circle scales up to fill the entire card with a color, and the inner circle, and circle border become white. The text also becomes white to be more readable on the background color.

The effect was achieved by placing an inner circle, circle border, and icon within a circle wrapper. Then with interactions I have the circle scale up, and the border and background circle change color on hover. Each card has a separate mouse out interaction so that it can revert to the individual color of the specific card.

Inspired by: https://codepen.io/jorgesanes10/pen/QdMEXr

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #127

Welcome to Daily Interaction #132.

This demo showcases a fullscreen menu animation when clicking on the menu trigger.

For this effect the menu comes down and lines scale in to create an interesting effect. The menu items also reveal from top to bottom. The menu items are in a wrapper set to an overflow of hidden so it creates the reveal effect. There is also a submenu at the bottom of the menu that fades in and moves up from the bottom. The scale, opacity, and move animations for the menu elements were set in interactions.

There is also a menu trigger animation that turns the menu lines into an x on click, and then reverses on second click.

Inspired by: https://animal.cc/

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #132

Welcome to daily interaction #101!

This demo showcases an infinite logo carousel on page load. There are two rows of logo placeholders that both move at different speeds. You can replace the logo text with an image, and change all the colors to match your brand.

For this I used Flexbox to create equal distance block widths, and then for the more square blocks I give it a specific width and height of 100 by 100. For smaller devices the blocks are all the same size.

The effect was achieved by having two rows next to each other and once one row goes out of view it starts at the beginning to create the infinite loop effect.

*The only caveat with this interaction is that if you navigate away from the page the animation does not loop and the timing starts to get altered for the logos.

The WebDev For You Slack Channel is also open so be sure to subscribe if you have any questions or want to know more about each interaction!

https://www.webdevforyou.com/

WebDev For You - Daily Interaction #101

Welcome to daily interaction #103!

This demo showcases a card with a call-to-action (CTA) button that appears at an angle when the user hovers. This can be a great way to let users know that when they click they will be taken to another page.

To create this animation I first created a card wrapper with the elements in it. I set the card wrapper to a position of relative. I then placed a div block inside of the card wrapper and set the position to absolute and 50% width and 120% height so that I could angle it in and not lose height at the top. I then moved this div block 100% to the right from the card. With interactions I rotated this div block -10 degrees. I also placed an arrow in the slanted div block and rotated the arrow 10 degrees to offset the -10 angle. The border also changes color on hover.

Happy Webflowing!

Inspired by: https://codepen.io/andrewsims/pen/mQoYwz

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #103

This demo showcases a clip-path swiper.js slider. The clip-path is animated using the Greensock animation script.

Inspired by: https://tympanus.net/codrops/2021/03/10/shape-slideshow-with-clip-path/

Swiper.js Slider: https://swiperjs.com/

Greensock animation script: https://greensock.com/

Clip-Path Swiper.js Slider - Interaction #153 - WebDev For You

Welcome to Daily Interaction #120.

This demo showcases a project card animation on hover.

When hovering over the image a gradient overlay and text appears on the card. Lines also animate-in around the image and below the project title below the image.

The effect was achieved by placing the lines in the correct position around the image, and then setting the initial scale of each line to 0 in interactions. If the line is horizontal the x-axis is set to 0, and if the line is vertical the y-axis is set to 0. I also changed the transform origin for each line around the image so that it animates-in from the correct position. Then I had the lines scale back to 1, and had the gradient overlay and text come in from an opacity of 0% to 100%.

Inspired by: http://www.casamance.com/

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #120

This is a simple mouse scroll animation with a dot moving from the top to the bottom and then repeating. This can make for a nice animation to let users know to scroll down.

WebDev For You - Interaction #154

Welcome to Daily Interaction #129.

This demo showcases a 180° project card animation on hover and click.

With this effect stars scale in and out behind the image. Also on mouse move the image moves around the card. When you click on the card the card rotate 180 degrees to reveal the more information.

For the stars I created a 6x8 grid of 50x50 blocks and added two div blocks inside to create the cross. Then in interactions I have them rotate, scale, and loop on hover. On hover out the crosses go back to their original size and stop rotating. For the image moving I added a mouse move over element interaction and just moved the image 20px to each side as the mouse moved around the card. On click I added a rotation to the card, so I made sure to place the card in a 3d-wrapper and added child perspective to it. Then inside of the card wrapper I added a front and back div to represent the front and back of the card.

WebDev For You - Daily Interaction #129

Welcome to daily interaction #100!

Thank you for checking out, cloning, or commenting on my daily interactions! They are really fun to do!

This demo showcases a parallax hero image on page scroll. There is more information as you scroll down as well :).

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev For You - Daily Interaction #100

Welcome to daily interaction #110.

This demo showcases a social media card animation on click. For this demo I have 3 social media cards appear below the profile card on click. This effect was achieved by resizing the social media blocks from 0 to it's original size which causes the up and down motion of the profile card at the top. I also used scale, move, and opacity transformations in interactions to change the 'contact me' button from text to an arrow. Another 'contact me' text also appears in the lower left hand corner of the card when clicking.

Inspired by: https://codepen.io/BeanBaag/pen/dzyGpM

https://www.webdevforyou.com/

If you'd like more information on how this interaction was accomplished be sure to join the Slack Community!

WebDev For You - Daily Interaction #110

102022939

1026885926

102976941

1038319252

gpt-5-nano

1070795817

1098530826

gpt-4.1-mini

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1131232030

Custom code and scripts won’t be supported.

Custom code

You won’t be able to export HTML and CSS files.

Code export

You won’t be able to manage site-level access and publishing.

Site-level roles & permissions

{{count}} {{sites}} {{exceed}} client seat limit. Excess seats will be removed.

Client seats

Free guest access to client Workspaces won’t be available.

Guest access

Staging sites will be unhosted with limited CMS, and no passwords or redirects.

Staging sites

1138017326

claude-sonnet-4-5

1181518147

1186914386

claude-opus-5

119812244

1207293145

1249999967

1274323923

1338389614

140432223

1444732314

1462086697

1506258256

1514009179

1559290700

1567550242

1592612642

1609688815

1621889036

1631162196

1674778404

1692956854

1696523225

17004821

1726628865

173867728

173927913

1768015773

gpt-5.5

1771795565

1863160016

1870758752

1905118106

1919353748

193274770

1960278590

1975670756

1977767562

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2031366339

2144870841

2147413158

2167006968

2216482092

2243824526

2250401860

225169335

2256326107

2291666157

2320791503

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2401437500

2486364096

gpt-4o

gpt-5-mini

gpt-4o-mini

2493307210

2546957535

2556595834

2624148589

2639613659

265457401

2717840929

2749253609

2789269995

2842505721

284989039

285302288

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

2940878268

2972123611

3022611874

3023147062

3026881092

3040272982

3056387847

3057360577

3070246498

307653616

3099012871

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3162101956

301 Redirects

Custom Code

Code Export

Site Transfer

Join client workspaces for free and add up to 5 users from your workspace

Guest Access

Limited seats available, n sites will have client seats removed

Client Seats

Staging sites will be unhosted with limited CMS and no passwords or redirects.

Staging Sites

3201643127

3220870747

32368712

3238278814

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3417108561

3452464914

3458155273

gemini-3.6-flash

3497785011

3590523401

3591394191

3594629977

3661799733

3669004489

3673080560

3680518347

3736611573

3737116140

3840796123

3844506029

3876837227

3879263312

Learn best practices for collaborating with clients in Webflow.

Best Webdevforyou Websites | Free Examples & Designs

Discover Webdevforyou websites
built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Start with a clone. Make it yours with an AI agent.

Discover Webdevforyou websites built by the Webflow community

Browse, clone, and customize thousands of websites #MadeinWebflow. Looking for templates?

Start with a clone. Make it yours with an AI agent.

Discover Webdevforyou websites
built by the Webflow community