The Top 180 Hover Webflow cloneables

Here's an example of displaying information on card hover animation for Webflow. When hovering over the image card the title, author and view project button appears from the upper left of the image. The effect was achieved by placing a div block inside of the card wrapper. In the interactions the div block was set to an opacity of 0% initially. On hover the div block moves to the lower right and the opacity changes to 100%. On hover out the div block returns to its original position and the opacity changes to 0%

Here's a way of adding video on hover to your Webflow cards. Using basic hover interactions you can create customized cards that play video on hover over on your Webflow site.

Add a hover slider style interaction animation to your site for revealing an image, or div content.

A right side menu for Webflow that slides the menu in from the right hand side on click. This menu features all of the interactions required to create a Webflow menu. When the user clicks on the hamburger button the menu slides in from the right part way on the screen. There's a menu item hover interaction which has a highlight effect that grows on hover and then fades out on hover out.

A text fill on hover effect for Webflow. When you hover over text on your Webflow site it fills the text with an animation effect.

Here's a fun, mouse hover effect that creates a shimmer/halo on the 3D card when the cursor hovers on it in Webflow.

A product card that displays the title on hover and follows the mouse in Webflow. This interaction is a very well designed interaction that flips the image and provides the title on mouse hover. The title then follows the mouse cursor over each card, displaying the relevant product names title.

A unique technique to create a text outline via an image mask technique within Webflow.

A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.

A glass bar navigation design for Webflow. This micro interaction for a glass navigation bar design with hover over interactions is a great way to add social media sharing buttons to your Webflow site.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

A fun exploration of SVG text effects as loading/enter pages in Webflow. This demonstration features three different circular SVG intro animations of differing color schemes and effects. The animations are all created via Webflow's native interactions and require no custom code. The animations are created with SVGs and a combination of Webflow scale, opacity and hide/show interaction states.

A dynamic info card hover interaction for Webflow. When a user hovers over the card a box moves from the title and displays a description while the image changes to color. A wonderful interaction that adds a level of animation and interaction to an info card.

Freelance user experience consultant and web designer. Available for custom Webflow sites, as well as UX design, research and prototyping.

Another unique button animation for Webflow. When a user hovers over the button the text color changes and the arrow icon animates via native Webflow interactions.

An info card for Webflow that features hover over interactions. This free Webflow cloneable features cards with unique hover over interactions. When a use hovers over the card the image turns from black and white to a color gradient overlay and an information block is shown with additional information about the post/card.

A unique parallax style section that features dynamic scroll interactions for Webflow. As you scroll down an image and background sections move at different speeds providing a unique Parallax style effect. There's also multiple different images that appear when hovering over the links on the side. All of this is built with Webflow's native interactions and no custom code.

An advanced jQuery card hover interaction for Webflow. When users hover over the cards they expand and grow and feature a unique mouse hover over interaction in which the icons shift while hovering in a specific card. The background colors change and the buttons transform into a different call to action button. This is a fully responsive interaction and requires a bit of custom code to implement. To get this to work copy the section-end-cta and copy the code found in the closing body tag on the homepage.

A great category card hover animation/interaction for Webflow. Adding this effect to your Webflow site creates a custom card animation/interaction effect. When you hover over the card the circle scales up to fill the entire card with a color and then the border color becomes white. The text also becomes white to be more readable on the background color. This effect is achieved by placing an inner circle, circle border, and an icon within a circle wrapper. With interactions the circle scales up, and the border and background circle change color on hover. Each card has a unique and separate mouse out interaction so that it can revert back to the individual cards color.

Here's a way to add a background image change on link hover to Webflow. Using a simple trick to change the background image on mouse hover dynamic items list. This is all done with native Webflow capabilities without any scripts.

Here's an advanced reveal image on hover interaction tied to Webflow's native CMS system. This is 100% Webflow native CMS powered using a little bit of jQuery. It's fully responsive with fluid responsiveness based on Finsweet client-first framework. The interaction is used to showcase a preview image from the portfolio CMS, but can be used in a number of different ways. For example you could set it as a values section, gallery section and much more. Be sure to copy the section-portfolio and global styles symbol as well as the global elements symbol. Copy the code in the before body tag and you are all set.

Here's a nice hover over interaction for a product card for your Webflow site. Upon hover over of the card the text fades behind the card and the image/product is grown on top of the text.

A unique gradient glowing text effect for Webflow with unique hover interactions. Playing with backdrop filters, SVG clip path, and linear gradients you can now add a unique glowing text effect to your Webflow projects. Just hover over the image to reveal the animation. Be sure to add the custom HTML embed found on the cloneable to ensure that this works properly.

Here's a way of using CSS grid and a small amount of custom code to create a postage-stamp style layout for projects tied into Webflow CMS. A great way to add a custom grid design in Webflow hooked to Webflow's native CMS.

Here is a wonderfully designed blog card animation on hover in Webflow. When a user hovers over the card the image rotates, a color overlay appears, and the date of the blog post appears. The summary panel below also moves up. When hover over the read more button the background and text changes color. The way this was achieved was by adding all the elements and then animated via interactions. for the image it was placed inside of an image wrapper and set the overflow of the wrapper to hidden. The width and height of the image changes to 150% so that when it rotates it is still visible inside of the wrapper.

An expanding side menu that opens up on the right side of the page on click in Webflow. A fully designed with interactions menu/navigation bar that opens on the right side of your Webflow site.

A unique interaction that features a hover over animation for images that creates a swirling effect as well as an animated button overlay. The interaction can be used for blog cards or any other type of card or element which links to another page.

Here's a highlight effect on text hover animation for Webflow. When a user hovers over text a highlight style animation interaction is displayed. This is perfect for a menu or other type of text with a unique underline animation on hover. Each menu item has a title and phrase. An underline appears under the title and the phrase at the same time and scales back on hover out. The phrase also moves a bit to the right on hover.

A unique 404 page design for Webflow. When a user visits the 404 page the mouse cursor creates a spotlight effect that displays an apology with 100 different languages.

Here's a demonstration of a frosted glassmorphism card with hover and mouse interactions. An easy way to add a glassmorphic effect to your Webflow site.

Five different variations of an image appearing when hovering over a link, or item. In the first example when a user hovers over the item the image stays in line with the text although slightly follows the users mouse. In the second version the image follows but at a different section and with a different image dimension. In the third example the entire div has an image appear from the bottom and changes the background of the item. The following demonstrations changes the entire background of the page to an image. This demonstration and cloneable was built entirely from Webflow interactions and doesn't use any extra custom code or HTML embeds. These examples rely on the Mouse move over element for the triggers.

Here's a unique team, about card hover animation for Webflow. When someone hovers over the profile image the image zooms out, and the name, details and a button is then displayed.

Here's a demonstration of a call to action card with a hover animation in Webflow. The hover animation appears at an angle when the user hovers over the card. This is a great way of indicating that the card can be clicked on and visit another page. To create this animation a card wrapper is created with all the elements in it. Then a card wrapper was set to relative and a div block was placed inside of the card wrapper and set the position to absolute and 50% width and 120% height so that it could be angled without losing the height at the top. Then this div was moved 100% to the right from the card. With interactions the div was then rotated -10 degrees. An arrow as then placed in the slanted div block and rotated the arrow 10 degrees to offset the -10 degree angle. The border color also changes on hover.

Social media sharing buttons with hover interactions for Webflow. These social sharing buttons feature a unique aspect in which the entire background color changes on hover over to the relevant social media sites color scheme. A simple, yet fun social sharing idea. This was built entirely from Webflow interactions and doesn't require any additional code.

Three individual animated buttons with hover interactions, which changes color, scale and rotates. On hover the svg mask changes its color via a button color background.

Another amazing Webflow full screen menu featuring a hover over image preview interaction that allows for dynamic images to be presented. This Webflow interaction creates a fun, yet professional animation to your Webflow's menu.

An animated, 3D layered social media sharing buttons for Webflow. When a user hovers over the buttons they pop up with a 3D layering effect on your Webflow site.

Here's a fun card interaction in which the cursor acts like a peeling of a label on a Webflow card. Perfect interactions to add a new layer of dynamic flair to your otherwise boring Webflow cards.

Here's a hover effect that adds a border and lines around a logo in Webflow. This effect was achieved by setting the border color to transparent on the initial state and then changing it on the hover state. Lines were placed with a width of 15px and a height of 3px. In interactions it was scaled from 0 to 1 on the x and y axis for the horizontal and vertical lines. To reduce the number of interactions required a class was created for the corner horizontal and vertical lines. Then a combo class was dded and placed the lines in the different corners around the logo. This allowed the use of only two interactions for the horizontal and vertical lines.

Here's a way of adding text above a div on mouse hover in Webflow. This method allows you to add floating text that follows the mouse on div hover. This also keeps the text in line within the specific div that you are hovering on.

A unique swatchbook hover interaction created in Webflow. When a user hovers over a swatch card, it sweeps out to display the card information. The entire animation and hover effect is built via Webflow's native interactions and doesn't require any custom code.

A geometric pattern design with hover animations created in Webflow. This technique and demonstration was created completely with Webflow's native designer and requires no additional codes or scripts to work properly. Using a bit of creativity and patience a few skew tranforms can build a seamlessly endless geometric pattern. Add in some border animations and you've got a fun, fully interactive geometric pattern in Webflow.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

A unique example of various text related interactions in Webflow. When the site loads each letter is gradually shown, scrolling down the page you're then presented with further interactions via the in-view and out of view interactions with offset to create a nice effect while scrolling. This is based entirely on Webflow's native CMS system. There is some custom CSS in order to have the customized Webflow CMS items and for cursor events.

Here's a fun hero section that offers a hover slider image interaction for your Webflow site. The images move based on the mouse location and expand and focus on hover state.

A large product display for Webflow perfect for ecommerce and other product related sites. This product card features a large primary image, product image, and a call to action button.

Here's a unique Webflow mouse hover interaction in which the background changes based on the location of the mouse on the page.

A unique image slider that appears when hovering over items in Webflow. This is perfect for providing a preview of the item that the user may visit next, this could be used for portfolios, about sections, blog posts and much more. When the user hovers over a link an image appears, when the user hovers over the next element the image from the previous item slides up and the current image replaces it. This technique was created with a simple jQuery code snippet which you can find in the custom code of the page settings. You'll want to note that there's also some custom CSS which can be found via the HTML embed. This cloneable was setup to use Webflow collections and does not utilize any custom Webflow interactions.

A side navigation based on Integromats dashboard design utilizing expand on mouse hover states with further hover over interactions and animations.

Here's a way to add a image splitting interaction on hover in Webflow. Using a grid and clip path to make this interaction happen. With this example when someone hovers on an image, the image opens in half and a text description is shown.

A unique CSS driven item reveal on hover CMS interaction. Using a simple CSS snippet you can allow for CMS item images to become visible when hovering over a parent item. Simply copy and paste the CSS code to either your custom code page settings or adding it via an HTML embed. When a user hovers over the CMS item an image appears over that specific item. Perfect to showcase additional images and objects that you don't want immediately visible to users but visible upon a hover effect.

Here's a virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

Here's a demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.

A simple yet fun Webflow interaction in which a custom cursor becomes visible upon item hover. This technique utilizes Webflow interactions but does have a small CSS snippet HTML embed, so be sure to add that. This example utilizes Webflow interactions Mouse hover events. When the mouse moves over an object the pointer scales accordingly. This is a fun, lightweight example of adding even more unique animations and interactions to your site.

Here's a way to add a rotating outline for buttons in Webflow. A unique and eye catching animation that draws your users attention to important buttons on your Webflow site.

Here's a concept design of a 3D contact form that follows the mouse on the page in Webflow. An interesting interaction that may help provide some inspiration for other methods on your own Webflow site.

Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.

A fun, cartoon styled 3D animated button that bounces on hover/click. A fun effect for your Webflow site and a way to liven up a typical button.

A unique 3D image mosaic with glare effects and 3D transforms in Webflow. This cloneable uses 100% native Webflow interactions to achieve the effects with a large number of mosaic tile divs for the images. The Webflow interactions utilizes to create this effect are Rotate, Filter and Move via Mouse Actions.

Advanced pricing table that provides a loading bar indicator for individual features. Includes hover interactions, animated bars, sticky header and much more. This also is mobile ready although be careful about hidden columns.

Show/hide image on text link hover.

Here is an interaction for hovering over a card using Webflow interactions. Simply clone this and add it to your site to add a dynamic hover interaction to your Webflow site.

A fun popping credit card hover interaction in Webflow. When a user hovers over the credit card it bounces up and then back down using completely native Webflow interactions.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

Here's a way to add a custom, social media sharing hover interaction to your Webflow site. When a user hovers over the icon on the page a social media sharing interaction is triggered that displays 4 different social media sharing sites.

A simple way to add social media links with a hover animation to your Webflow site.

A fun demonstration of animated icons with hover states in Webflow. They're very simple line icons with subtle, yet unique, hover interactions. One thing to note with the shapes that change size is that the size animation rather than scale, as adjusting scales adjusts the widths ever so slightly and doesn't make the animation look precise. Size and move were the only two animations used for these shapes. The only easing was used was ease and all the animations have a duration of .5 seconds.

A fun and unique green pricing table design for Webflow. This pricing table design features a large headline and a four section pricing table with a unique hover over interaction. When a user hovers over a card the card is attracted to the mouse and moves around a bit. The pricing cards feature product information as well as a primary discounted card label for a package. A great design to get your Webflow sites pricing section built out quickly.

Here's a unique test/experiment to create an advanced LED display hover effect in Webflow. This is a great demonstration of what you can build with Webflow interactions and may lead to some. inspiration for future Webflow project builds.

This is an interaction that displays an image on hover via a unique interaction in Webflow. Add this animated hover interaction to your Webflow site to add a dynamic interaction for your images.

Reveal an image on initial hover, on second hover remove the image from the card. Difficult to achieve as you need to sequence the triggers and hide elements to control the interaction.

A unique animation perfect for a menu item for a Webflow. This entire animation was created with Webflow's native interaction. When hovering over the item the image slides in from a rotation with a blue background coming in first. The image and background appear on the right side of the menu item.

Here's a way to highlight text or categories of like and similar nature by hover over. This is a great way to add emphasis to certain items on your site/page by simply hovering over a category or text item. This could be extended for CMS items as well and your own collections.

Here's a way to add a unique image hover interaction to your Webflow projects. When a user hovers over an image various hover over effects take place. This demonstration shows several different methods. You can use this animation variants found on this page. To add this effect to your project copy the image wrapper (.wrapper) and change the transform-origin of the images as you'd like.

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

A three tier pricing table design with a floating primary central div for Webflow. Perfect to get your Webflow pricing page launched quickly with three different packages, shadows, and button hover animations and a fully responsive design.

Custom product image slider featuring animated image transitions