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

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

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

WebDev For You - Daily Interaction #105

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 VØR

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

WebDev For You - Daily Interaction #98

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

WebDev For You - Daily Interaction #135

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

WebDev For You - Daily Interaction #128

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

WebDev For You - Daily Interaction #133

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

WebDev For You - Daily Interaction #132

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

WebDev For You - Daily Interaction #127

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

WebDev For You - Daily Interaction #110

Welcome to Daily Interaction #134.

This demo showcases a parallax card animation on mouse move.

With this effect a gradient overlay moves with the mouse on hover, and a border moves in the opposite direction. The text also moves and rotates left and right with the mouse.

The effect was achieved by placing the gradient overlay and border within the card wrapper. The text was placed in the bottom right of the border div using flexbox. Then in interactions I added a 'mouse move over element' interaction and had the elements move and rotate on the x and y axis when the user moves their mouse over the card wrapper.

Inspired by: https://tympanus.net/Development/TiltHoverEffects/

Images from: Unsplash.com

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

WebDev for You - Daily Interaction #134

WebDev For You - Daily Interaction #134

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

WebDev For You - Daily Interaction #100

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

WebDev For You - Daily Interaction #101

Welcome to daily interaction #47.

This demo showcases a fullscreen menu with a menu item image on hover.

Inspired by: http://pollenlondon.com/

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

WebDev for You - Daily Interaction #47

WebDev For You - Daily Interaction #47

Welcome to Daily Interaction #130.

This demo showcases a blog card animation on hover.

With this effect the image rotates, a color overlay appears, and the date of the blog post appears on hover. The summary panel below also moves up. When hovering over the 'Read More' button the background and text changes color.

I first added all of the elements and then animated via interactions. For the image I placed it inside of an image wrapper and set the overflow of the wrapper to hidden. I then set the width and height of the image to 150% so that when it rotates it is still visible inside of the image wrapper.

Inspired by: https://codepen.io/ChuiSauCE/pen/KGpQbe

Daily interactions will resume on Monday June 3rd.

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

WebDev for You - Daily Interaction #130

WebDev For You - Daily Interaction #130

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/

WebDev For You - Interaction #153

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/

Discover webdevforyou websites built by the Webflow community

Discover webdevforyou websites built by the Webflow community