The Top 181 Hover Webflow cloneables

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

A fun way of adding a water mouse hover ripple effect to your Webflow site. Simply add a tiny code and the javascript library and you're all set.

A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.

A fun GSAP text hover image span effect created for Webflow. When hovering over a specific text or link, images appear on the screen. Perfect for dynamic and playful interactions powered by GSAP. This script is powered by GSAP and you can find the custom code found in the page settings. This allows you to signify images that appear when a user hovers over a native Webflow text span item. This is also mobile friendly as the code allows you to set media resolution settings and customizing the effect on the non-selected text span. You are able to customize the easing, zindex position, colors and much more.

Here's a full screen menu navigation with animations and interactions in Webflow. This is a great way to easily add a menu/navigation to your Webflow site. This was comprised of three components during the build process. First, an image wrapper with an image inside of it. Second, the blue background and third a right wrapper with the menu items inside of it. The image wrapper and right wrapper are both 50% width within the menu. The width of the blue background is 150% so it has a quicker animation as it scales in. By having separate wrappers inside of the menu wrapper the scaling effect can also apply to the image, and the blue background as well as individual animations to the menu items. The menu trigger also turns into a close icon on click and then back to the hamburger button.

An add to cart hover button animation for Webflow. When a user hovers over the Add to Cart button a shopping cart icon slides in from the right side. This helps users understand the action taking place on the button and helps add a new level of dynamic buttons to your Webflow site.

Horizontal vertical marquees are easy to create in Webflow. However vertical infinite scroll marquees aren't as prevalent. Here's a way to create a vertical infinite scroll marquee in Webflow. This example even includes a masking hover over effect for each different scrolling marquee. Each marquee is built with native Webflow interactions and no custom code.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

A unique product card animation on hover in Webflow. When a user hovers over a card the image shifts down, and a border appears with an animation, there's also a description of the card that appears as well. This animation effect was built entirely with Webflow's native interactions.

Create a looping infinite CMS Marquee with pause on hover effect. Achieved via custom CSS.

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

Here's a way to add magnetic images to links on Webflow. The images appear as you hover over the links and stick to the mouse and overlay the text over the image. This method relies strictly on Webflow interactions and doesn't require any custom code or HTML embeds. The interactions use a combination of hide/show, scale, opacity text color and border color to work properly.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

A full set of beautifully designed interactions in Webflow for your projects. These interactions include buttons, play buttons, search, toggles, hamburger buttons, toggles, social sharing and much more.

A unique way to display and reveal a thumbnail image preview on hover.

A well designed starter dropdown navigation menu with hover over for Webflow. This consists of clear class names, 100% native interactions and basic dropdown triggers. It's also mobile friendly and responsive design.

Here is a 3D info card animation on hover in Webflow. When you hover over the card an image panel rotates in horizontally to reveal the content. The effect was achieved by adding a div block with a child perspective applied to it. Then another div blcok was added inside of the 3D wrapper. With the interactions this div block was rotated from 90 degrees to 0 degrees on the X axis. Since the wrapper has a child perspective it creates a 3D effect for the panel as it comes in. It also has a reveal from top to bottom as the panel comes in.

An infinite scroll marquee on hover interaction for Webflow. When a user hovers over a link an infinite scroll marquee animation is displayed. This is perfect for a menu or navbar within Webflow in which you'd like to add extra emphasis and animation design to. This was built entirely from Webflow's native interactions and requires no custom code.

A fullscreen photo accordion with hover over interactions for Webflow. This Webflow cloneable features a unique full screen accordion powered by Webflow's native CMS system. When a user hovers over each card the card expands to show a larger image and detailed information about the accordion. While a majority of the effects were created with Webflow's native interactions there is some custom code that needs to be applied.

A simple yet effective CSS infinite marquee for Webflow featuring hover pause capabilities. Easily adjust the animation duration via the embed element with CSS. While you could create the marquee effect with Webflow's native interactions this allows you to bypass added JS through a simple CSS embed allowing for greater control over the marquee via this CSS script.

Here's a way to add a custom mouse cursor tooltip in Webflow. This custom tooltip fades in when hovering over an element and follows the mouse pointer over that element. This could be used for project title information, additional/next slider information and much more. A majority of this is created with Webflow interactions. Please note that there is some custom style CSS in the head section of the page.

A unique GSAP Webflow cloneable in which items expand on hover with a unique transition. In this example there are three vertical columns, when hovering over one of them it expands it into view and closes the other opened vertical column. This is accomplished via GSAP & Flip.js which can be found in the custom code section of the page settings. The code is customizable to target different classes and then adds or removes a class to those other classes. Flip allows you to customize the duration and the easing. In this demonstration there are three videos and three tab divs. Do not get confused that these are normal Webflow tabs as these are just the names of the div. Be sure to check out this use case of using GSAP, Flip.js and Webflow together to create a unique interaction.

Here's a way of creating a glowing, 3D hover card effect in Webflow. When a user hovers over the card the card creates a 3D effect with a gradient outline, another interaction is added to show a 3D rotating reflection. All of this was created with Webflow interactions and zero custom code.

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

A unique card hover animation in Webflow that creates a 3D parallax style interaction. A great example of what can be built using Webflow's native interactions. When hovering over the card a two layer parallax effect is shown with the top transparent purple layer separating from the bottom image layer. Both layers seem to transform in a 3D space while the Name and Title moves at a different rate than the other two cards.

A fun interaction that shows an image trail on text link hover in Webflow. When the mouse hovers over a text link in Webflow an image trail is shown. This effect uses vanilla Javascript to paint the images when hovering over an object.

A 100% native Webflow tooltips solution. Most tooltips utilize third party JS libraries to add tool tips to Webflow. These tooltips are created 100% with Webflow dropdowns to create a unique solution to creating tooltips within Webflow.

A unique animated button with a grid effect on hover via Anime.js

Here's a wonderful parallax card animation on mouse moving/hover states in Webflow. This effect uses a gradient overlay that moves with the mouse on hover, and the border moves in the opposite direction of the mouse while hovering. The text moves and rotates left and right with the mouse movements. This 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, interactions were added via the mouse move over element and the elements move and rotate on the x and y axis when the user moves over the card wrapper.

Here's a way of changing the background image on a link hover in Webflow. This is great for a menu, or other sections in which you'd like to have the image change while hovering over a text or link element on your Webflow site.

A scroll into view CMS driven portfolio or features interaction. Also has hover over effect.

Here's a way of adding a flipping card animation to cards on your site. This component can be used for a number of scenarios and allows for additional information to be displayed on your cards without taking up important site real estate.

Looking to easily add buttons to your Webflow site? Here are 16 different button designs with prebuilt hover state interactions.

Four different custom button designs for your Webflow site. These custom, animated buttons already have the necessary interactions to make them dynamic and interactive. A variety of hover states effects can be found in these 4 different button designs.

A unique hexagon hover effect in Webflow via custom CSS. When a user hovers over a hexagon on the page a color gradient shifting animation is displayed with a fade in and fade out animation. Please note that you need to include the HTML embedded CSS for this effect to work.

Here's a fun way of adding a text color invert on mouse hover effect for your Webflow site.

Here's a fun demonstration of creating a 3D layered interactive page for Webflow. When you move the cursor around the page the elements move around the page.

A 3D credit card effect/animation in Webflow. This 3D credit card has hover over effects as well as click interactions, on click the card flips vertically, horizontally. All of this is accomplished via native Webflow interactions and no custom code.

Well designed card hover transitions/interactions for Webflow. When a user hovers over a card the card changes colors, moves the content up, removes the icon and adds a link indicator. Perfect for dynamic cards/feature sections within Webflow. This was created with minimal hover interactions.

Here's a unique and fun button with border animations in Webflow. Initially the button looks rather basic, however with a few line animations it makes this button really pop. The lines were placed within wrappers and set the wrappers to an overflow hidden. The move animations to each line was added to control which direction the lines came in from with the different hover states. Scaling the lines doesn't allow for transform-origin to be changed on the different states, hence why the move option was used instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of a button with a position of absolute.

Add flair to your Webflow buttons with this linear gradient animation. This demonstration include two different variations of the linear button gradient animation, one created solely via Webflow interactions and the other via CSS. There are also two different styled animations, one that's one time and another that infinite loops while on hover.

A well designed hero section that offers 3D styled product demonstrations with hover over interactions. Perfect for a startup or services company that wants a fun, well designed hero for their homepage.

A fun way of adding a stair melting text transformation animation on hover in Webflow. Perfect for adding a dynamic layer of text to your Webflow site's header or headline section.

Here's a unique underline animation for tabs in Webflow. When you hover over a tab, an animated underline interaction is triggered. The tabbed items also have a hover over interaction in which a view magnetic button appears and follows the cursor over the hovered item.

Here's another well designed Webflow navigation menu bar with dropdown interactions. This nav menu is perfect cloneable to jump start your Webflow site builds by providing a fully functional, mobile friendly mega menu navigation to your Webflow site.

A fun way of adding a full screen menu with image hover effect on text links. The full screen menu is responsive and easily copy pastable to your Webflow site.

Here are 8 navigation and menu designs perfect for your Webflow site. Various layouts all with responsive mobile friendly designs ready to go.

A unique button design in Webflow with hover over interactions. When a user hovers over the button the button fills from right to left and on hover out the fill moves from left to right creating a unique Webflow button via native interactions.

A unique photo/masonry grid for Webflow featuring reverse scrolling interaction and mouse hover over effects. As the user scrolls down the page two sets of images scroll in one direction while the middle row moves in the opposite direction. This effect was created strictly from Webflow's native interactions and doesn't require any extra JS or CSS.

Here's a unique way to show off your team cards on your Webflow site. When you hover over a card a social media panel appears on the right hand side. The dots are color coded to match the brand color of the social media platform. You can place text or icons inside of these dots as well. On the hover a panel appears with the brand color and a large social media icon. The image rotates -10 degrees to 10 degrees on hover. The animation is pretty straight forward. The only thing to note is that the dots had to placed in the same wrapper so that when you hover over the dots you could target a sibling element within the interaction. This allowed to make sure that the effect could be repeated across multiple cards by targeting the sibling classes of the dots.

A unique interaction in which a different image is shown based on the cursor location on the Webflow site. This effect was created entirely from Webflow's native interactions and requires no custom code. A great example of thinking outside of the box, integrating the use of a grid design to trigger the hidden images based on mouse over trigger events.

A unique way of erasing content via a hover over effect with your mouse. Also includes a touchable version for tablets. Be sure to add the custom code to your site to ensure that the black overlay is properly shown.

Another great 3D card hover effect created in Webflow. You can change the angle from the transformations and you are also able to change the layout if you wanted.

Here's a way to achieve a 3D scrollable isometric grid in Webflow. When you add this to your Webflow sites you'll create a dynamic, scrollable grid that adds a 3D popping effect on hover. This technique is accomplished without any interactions and uses Webflow's native transitions and effects. This example also is tied to Webflow CMS.

An image project card animation for Webflow that includes hover interactions and animations. With this effect the title and caption move upon hovering, the view project appears and moves down with an underline animation. This interaction also includes a cover overlay that moves and appears from the upper left corner on the hover state. 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 then added inside of another wrapper. The interactions had different elements move and the underline effect scale.

Various demonstrations of how to create magnetic elements in Webflow. This method is typically used for buttons but can be implemented on a variety of objects using a single interaction and class. In this demonstration a parent class called is-magnetic has an interaction tied to it that allows the items in this class to be "magnetic" and drawn to the cursor. A

Here is a unique project flipping card animation for Webflow. In this example the cards flip 180° upon clicking on the card, the card also has a hover over animation in which the stars scale in and out behind the image. On the mouse move the image moves around the card. For the stars a 6x8 grid of 50x50 blocks were created and added within two div blocks inside the cross. In the interactions they are set to rotate, scale and loop on hover. On hover out the crosses go back to the original size and stop rotating. For the image moving there is a mouse move over element interaction and moved the image 20px to each side as the mouse moves around the card. On click the card flips via a rotation to the card, so it was placed in a 3D wrapper and added child perspective to it.

Here's a 3D parallax style card interaction/animation for Webflow. With this effect a card rotates on mouse move, and the image inside the card rotates 360 degrees that gives the effect that hte card is moving. A caption also appears on the bottom section when hovering on the card. The card is in a 3D wrapper with a child perspective applied to give it a 3D effect as it moves.

A fun Webflow interaction that follows a users mouse as it navigates over a grid in Webflow. The arrow follows the direction of the mouse as it enters the viewport using Webflow's native interactions. The size of each grid item also increases or decreases based on the position of the mouse on the individual items and grid overall. A great example of what you can build with Webflow's native interactions.

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

I loved how the Ribbon Finance website looked, so I couldn't stop but rebuild it in Webflow with a "party mode" on CTA hover...

Here is a unique button with hover animation in Webflow. When you hover on the button the border outlines in a cut from two different points which makes the line look segmented. When you hover over the button the lines seem to move in a clockwise fashion and then reverses on hover out. This was achieved by placing two skewed div blocks at the top and bottom of the button with. the same color as the background. The div block was placed precisely on top of the button border. This makes it look like the border is being cut. Then those to blocks are moved left and right on hover to make it seem like the lines are moving. It's a subtle, yet unique effect that adds an interesting effect on hovering on a button.

A unique water ripple interaction/effect based on the mouse movement for Webflow. The ripple effect is created via JS found in the page settings powered by Jquery Ripples. A fun effect that can be easily added to your Webflow site or project.

Here's a fun text effect in which the text fades away on mouse hover in Webflow. A great way to add a dynamic animation interaction to your Webflow site.

A unique button design for Webflow with hover interactions. This purple styled button features a hover interaction in which the purple arrow expands and grows when hovering and then shrinks back to the original design on hover out. All of the button animations are built with native Webflow interactions.

Here's a wonderful 3D card hover effect in Webflow. When a user hovers over a card a 3D effect is shown and folds down and additional information is displayed. This is achieved via interactions and rotates the image 90 degrees back and a content wrapper rotates 90 degrees on hover. The effect was achieved by placing an image wrapper and a content wrapper inside of the 3D wrapper. The 3D wrapper has a child perspective applied to it via the transform option. This allows the div block inside of the wrapper to have a 3D effect as they rotate in and out. The transform-origin for the image wrapper was set to the bottom and the transform-origin for hte content wrapper was set to top. In the interactions rotation and opacity animations to both the image wrapper and content wrapper. Both div blocks are rotated on the x-axis.

A stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

Here's a way to add a glitch on hover effect to divs/cards that have images inside of it within Webflow. A fun way of adding a dynamic glitching effect to your Webflow site.

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

Here's a unique, recipe card animation created in Webflow. This is perfect for showcasing recipes on your Webflow site in a unique and interactive way. 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 shows up on the top right corner to display the time it takes to create each recipe.

Here's a technique to add growing divs or sections on mouse hover in Webflow.

A free Webflow cloneable for a social sharing button interaction. When a user hovers over the button it expands to showcase 4 different social sharing sites, Behance, Dribble, Instagram and Twitter. This social share button was created solely from Webflow interacations and is a fun way to add social sharing or a contact to your Webflow site.

Allow visitors to preview a site thumbanil on external link hover in Webflow. This feature allows you to get a preview of the site that you're linking to without having the user leave your site. It works by extracting the external links on page load, it then grabs a screenshot of those sites and reveals it on link hover. The card's position is calculated using custom code and thus works with inline links and link blocks. Just change the external link and preview will be updated automatically. Replace the demo screenshot API with your own in your live builds.

Here is a pressed state effect for buttons like the Google Material design system. Upon clicking it the button has a ripple effect allowing for the user to understand that the button was clicked and an action was performed.

A tag/tooltip hover badge perfect for your Webflow site. When yo hover over the colors, individual tags/descriptions follow the cursor on your Webflow site. Be sure to add the HTML embed code to your sites for this to work. The elements are all created by created an element ID and associating the HTML embed script with the element ID.

An example of an expanding image cards on hover menu and navbar in Webflow. This full page menu adds a hover interaction that expands cards or images on hover in your Webflow menu.

Here's a clean, beautiful language toggle button that can be implemented on your Webflow sites. There are hundreds of flags that you can match with any language you may need.

20 predesigned CSS link hover effects perfect to copy and paste on your next Webflow project. Each individual text link hover effect includes its own CSS for the hover effect. Simply add this to a custom HTML embed or to your sites custom code section. Effects include strikethrough, double underlines, scramble, moving in from both sides, growing and much more. A simple way to easily enhance your sites experience through simple, micro interactions.

A fun text effect where text hops on hover.

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

Here's a project card animation on hover in Webflow. When hovering over the image a gradient overlay and text appears on the card. Lines also animate around the image and blow the project title and below the image. The effect is achieved by placing the lines in teh correct position around the image and then setting the initial scale to 0 in interactions. The lines horizontal x-axis is set to 0, and the vertical line is also set to 0. The transform-origin for each line around the image is set so that each line animates into the correct position. Then the lines scale back to 1, and the gradient overlay and text changes from 0% to 100%.

Add a hover over highlight animation to your accordions in Webflow. This adds another layer of dynamic effects to your accordions when hovering. No custom code needed and all done via interactions in Webflow.

A demonstration of product cards in Webflow that utilize hover over interactions to effect both image and title. When a user hovers over the cards in Webflow the image div grows and the title appears to follow the mouse while hovering over each card. A fun interaction and a way to showcase products in a unique and creative way.

A unique expanding portfolio hover interaction built completely with Webflow interactions. When a user hovers over these portfolio items they expand to showcase a larger version of the image. This cloneable was built using entirely Webflow's native interactions and does not require any additional code or HTML embeds. The Webflow interaction uses the Element trigger on mouse hover targeting the class so that all classes will have the same Webflow interaction. When the user hovers over the size of the item expands, on hover out the item returns to the original state. A clean, lightweight solution to create expanding portfolio items in Webflow.

A fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

Here's a great way to add dynamic hover states to your team cards in Webflow. With this profile card design several hover states are displayed with various scaling and movements. The top circle has social media icons to make the card more functional and display relevant information. The bottom has the name of the person displayed in a rectangle. The hardest part of this interaction was adding all the shapes into the card. Specific wrappers were used and positioned around the wrapper in an absolute position. For the rectangles at the bottom they were skewed on the x axis -20px. Take note, when you add a move interaction to these shapes the skew property gets removed so you have to add the skew property to the initial state of the interaction as well.

This demo showcases a unique card flipping animation on hover in Webflow. In this effect a panel rotates in from the left to reveal more information about the image, or post and the image slides to the right to make room for the flipping panel. The effect was achieved by placing an image wrapper and content wrapper with a child perspective added to it. The content wrapper is 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 overflow of hidden so that the image slides to the right you don't see it beyond the wrapper. Interactions were created via rotation of the content wrapper -90 degrees to 0 degrees and moved the image to the right 50%.

An easy way to add a text link highlighting effect to your Webflow site. With this cloneable you'll learn how to add an inner shadow on link hover with a distance attribute to create a growing underline effect for your links. This method uses no interactions and relies on Webflow's native transitions.

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.

Here are well designed service cards that have a rotation hover interaction that highlights and rotates the card for Webflow. This perfect for adding 3D dimension to a Webflow site via service cards, project cards or even pricing tables.

A full page portfolio masonry grid with a mouse hover over effect.

Here's a unique hover effect for the portfolio cards in Webflow. When hovered, the card image expands and fades into a video. There's an infinite marquee that is then overlaid to provide a unique effect.

A product card with hover animations for Webflow. When a user hovers over the card the title of the product appears, and a few icons appear as well as the price staggered from the bottom. There is a cart icon that can be used to add the product to the cart, an eye icon which can link to the product page, and a heart icon that can link to a counter of some type.

Here's a fun way to add a 3D text stroke effect on hover in Webflow. When a user moves the cursor around the page the text creates a 3D stroke effect following the cursor around the page.

A simple landing page perfect for a digital business card via a QR code or other short URL. This design feature a hover slider effect and large cards to make it easy for users to navigate your digital business card site.

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

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.

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.