The Top 93 Image Webflow cloneables

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.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

Learn how to implement GSAP ScrollTrigger in Webflow. This tutorial and example cloneable showcases several different Scrolltrigger GSAP effects to turn your Webflow site into a dynamic powerhouse. When loading the page you are presented with a primary image and brand name. As you scroll down the brand moves from the bottom of the page to the top menu while reducing size. Further down the hero section appears and one of the words begins to move behind other text. Further down an image appears and then grows as you scroll further down the page. This shifts into the product section in which images appear with a parralax effect over certain words. This shifts into another product section and the backgrounds transition while the images still float above the text. Each section has a different background color/text color with the images continually scrolling above the text. This utilizes a lot of custom code, and utilizes Webflow's native CMS for products and items found on this page with CSS nth-child. You will need to add the custom code found in Page Settings to get this to work properly. Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50 Conceptual design for https://www.minimalgoods.co/

Here's a way of adding a full page infinite scrollable and draggable grid in Webflow. This grid is fully draggable in ALL directions, horizontal and vertical as well as in any other direction. A perfect way of adding a unique design for portfolios, photography and much more in Webflow. This can also be used to tie into Webflow's native CMS system.

A unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.

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.

A unique interaction in which images pop up an trail the mouse cursor when moved on the page. A fun technique that could be implemented a number of ways to create various dynamic effects to your Webflow site.

A smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

Here's a product card with image zoom on hover for Webflow. When the user hovers over the product image it scales up and zooms so the user can see more information about the physical product. This was accomplished by placing the image div inside of a wrapper with an overflow hidden. When the user hovers over the image wrapper the image div scales up to double the size. Then with the mouse over element interaction the image moves in different directions when hovering over the image wrapper. This allows the user to hover around the image to see different parts.

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

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

A set of unique and interesting image slider transitions including distortion and warping effects made with WebGL. The code was modified to behave as bidrectional looping slider. This works on both desktop and on mobile.

A CMS driven 3d parallax effect for photos and portfolios using classes by Finsweet.

Here's a way of using Webflow's native CMS system and Webflow lightbox together as natively they don't work well together. This is a tiny and easily-implementable script that combines the best of both world. Create your nested collection with lightboxes, check "link with other lightboxes". Then, replace "collection item" in the script with the class name you decided to give your collection.

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 method to create more dynamic and interactive experience by allowing your users to view a simple cursor animation powered by GSAP and Cuberto Mouse Follower. This utilizes custom code so you'll want to make sure you check the pages custom code section for stylesheet and JS code. This combines the power of GSAP and mouse-follower.min.js to create a smooth mouse following animation. With this you can modify the MouseFollower scripts speed, skewing and skewingText functionality to your specifications. Unlock the power of GSAP powered dynamic site elements for your Webflow site today.

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.

Are you looking to use Webflow tabs with a rich text CMS field? By default Webflow doesn't allow rich text fields to be placed in the tabs by default. This technique uses a bit of JavaScript so if you change the classes be sure to update the code within the page settings. The arrows in this demonstration are from Font Awesome and the colors can also be updated in the page settings.

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

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.

Unleash the power of GSAP Scrolltrigger toggle in your Webflow projects. This allows you to create complex, and yet lightweight effects powered by both GSAP and Scrolltrigger. This CMS powered GSAP & Scrolltrigger effect showcases a hero section in which three different slides transition between each other based on the users position on the page. After the initial hero the second section features different words and images that ease in and out based again on the users position on the page. These sections are utilize Webflow's native CMS to power each slide. You will find the custom code that powers this under the pages custom code settings and it allows for you to customize the items, the trigger element, the timeline and mobile friendly attributes.

Here's a technique to add a 360 degree draggable image to Webflow

Here's a way of adding a unique, full screen image transition to your Webflow site via Three.js Each image loads a unique transition upon clicking them and turns the images full screen upon click.

A vertical masonry image grid lightbox driven by Webflow's native CMS. This allows you to easily integrate a beautiful masonry image grid with a full screen pop up modal upon click. The modal has a lighthouse slider with thumbnails that you can click on and view each individual image within the CMS system.

A beautiful horizontal image portfolio parallax effect for Webflow. When a user scrolls down the page the images move from right to left and provide a parallax style effect as the image behind the visible section is moved as well. This technique utilizes Webflow's native interactions and doesn't rely on extra Javascript or CSS. The technique uses While scrolling in view, with one div moving over at one speed and the section with images moving over at another, providing this unique parallax image scroll effect.

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

A demonstration of how to use text as an image mask in Webflow. Using this technique the text becomes a "transparent" mask that allows the background image to show through. As the users scroll down the site the text scrolls up and shows the background image. This effect requires a simple CSS code which can be found in Page Settings to work properly.

Make those Macbook mockups interactive by adding internal scroll to the screens via this Webflow cloneable. This cloneable requires no additional code and can easily be applied to your site. Simply copy the element to your site and then modify the image found in the Macbook wrapper called website image and modify it. This will allow you to add an image inside of a Macbook mockup so that the users can scroll inside of it. A fun way of showcasing items, features, portfolio site screenshots and more.

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.

A simple and effective way to reveal an inline image within text in Webflow. This unique Webflow interaction adds some boldness and creativity to an otherwise boring text link. When someone hovers over the text link the text expands to display an image, drawing the eyes and making for a unique call to action.

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 scroll interaction created using solely Webflow interactions and some minor CSS via an HTML embed. As the user scrolls down the page the hero image zooms out while the text continues to scroll up the page. As you enter the next section on the page the images for each section change in the same div that the original image zoomed out unto. This continues for each section on the page as you scroll throughout the site. An excellent use of Webflow's interactions and the While scrolling in view element trigger. All that is required to create this effect is the move element within the mentioned scrolling in view trigger.

Here's a way to create a rotating image on page scroll in Webflow. Perfect for portfolios, products images, and much more.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

Add an Apple style keynote feature grid to your Webflow site. Video tutorial found here: https://www.youtube.com/watch?v=fAkGkF-w1gI

Here's a way to create a feature section that highlights the text and changes the image based on page scroll. This was created with 100% native Webflow interactions.

Here's a way to add images within text spans in Webflow. This method utilizes Webflow's designer and some custom Javascript to allow you to add images within a text span. The Javascript snippet is used to move each span-element to be a child element of it's corresponding span wrapper element. This allows you to dynamically alter the HTML structure to accomplish this technique.

A beautifully designed team page with image transitions on click in Webflow. Built with GSAP this creates a team page section, and relevant content on click transitions not found via native Webflow interactions. Please note that in order for this to work properly you'll need to copy the HTML embed within the Global Styles symbol as well as the custom head code and body code found within the page settings section.

A Webflow CMS driven image lightbox/photograllery. This lightbox is created using custom code via jQuery and the script can be found in the closing body tags. This method allows for you to use CMS collections on a single page and power lightboxes of photogalleries with a simple bit of code. The lightbox features a pop up modal, previous and next buttons and a way to close the modal screen.

Add a background text clipping effect to your Webflow site. This allows you to use any image as the text colors/styling by adding a clipping effect that allows the image to pass through the text.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

Easy to implement looping lightbox via jQuery for Webflow. All you need to do to implement is copy the code from the page settings. Add fo-lightbox class to all lightbox elements. Publish the site to see the results as it won't work in designer. This method utilizes Webflow's native CMS for the images and the custom JS code provided in the closing body tag of the Page Settings.

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.

A great way to showcase different content in sections based on users page scroll. This cloneable utilizes GSAP and Scrolltrigger in line with Webflow CMS to showcase various content based on when a user scrolls down a page. In this example as the user scrolls the primary image changes to the next image based on the content that's currently visible. This is also hooked up to Webflow CMS in order to power this by your Webflow CMS collection. This opens all sorts of potential use cases aside from the one demonstrated here. You could switch content out instead of images, or even add videos or other GIF files instead of static images. A simple and yet powerful GSAP cloneable that's perfect for your Webflow arsenal.

Here's an example of a 360 degree image showcase featuring Nike Air Jordan 1 Retro High Spider-Man origin story. Please note that this example only works on desktop currently.

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.

Here's a well designed, full screen navigation menu with hover image interactions and slide in transitions for Webflow. A unique, classy styled navigation and menu that provides interactions when hovering over text links. The images change out and there are text effects.

Here's a work around to use .webp files in Webflow. The trick is to upload your webp files as .webp.txt in the asset manager. Then you can use a <picture> tag and now you've got native Webp files hosted in WEbflow.

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

A unique javascript powered Webflow interaction in which images change on items in viewport and a clicking sound is triggered for each new item that's centered in the viewport. As mentioned this utilizes a custom javascript which is found in the pages custom code section. This script allows you to utilize Webflow's native CMS to create a list of text items and associated images with each CMS item. As the user scrolls down the list of text items, the items that are centered in view become highlighted white, the primary CMS image is shown and a clicking sound is played. A unique and fun way of adding a little bit of JS to your site to create unique, and effective Webflow interactions.

Want to compare two products or images on your Webflow site? With this cloneable you'll be able to add an image comparison section to your Webflow site. This is perfect for product comparisons, service comparisons and much more. Please note that this utilizes Beerslide.js so you'll need to add the custom code found in page settings for this to work properly.

Here's a way to add GSAP velocity scroll effect to your Webflow CMS image library. Using this technique the images create a shredding load effect which is based on the Webflow native CMS library and images found in that library. A good demonstration of how you can use GSAP with Webflow CMS.

A massive grid that moves objects into view as the mouse moves into the viewport. This is perfect for large product pages, portfolio items and much more in which you want to add a dynamic and interactive grid to your Webflow site. This demonstration uses a combination of Symbols/components and Webflow's mouse move in viewport interactions to generate a large grid that can be navigated by the users mouse. As the user hovers over the image or item card the image expands. All powered without any custom code and using Webflow's interactions and symbols/components.

Five different image mouse trailing effects in Webflow. When a user moves the mouse cursor on the site the images pop up and follow/trail the cursor. These different effects allow you to add a new layer of dynamic elements to your Webflow site that open up all types of possibilities.

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.

Connect Webflow's native CMS to an image plotter via this cloneable. With this cloneable you can add an image plotter to highlight features, locations, items, product features and much more. The multi-reference highlight items to each main gallery image item using a simple top and left coordinate value to set the specific location of the dots on the image. Each highlight dot also leverages conditional visibility to adjust the position of the tooltip image polotter depending on the location of the dot and whether or not the values were set in CMS.

Add a unique and customized menu and navbar to your Webflow site. This example provides a unique feature of an image preview on link hover in the full page menu/navbar of your Webflow site.

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

A beautifully designed implementation of lightbox driven by Webflow CMS. A great way of adding a lightbox to your Webflow site that's powered by Webflow's native CMS.

Here's a way to disable right click images in Webflow. The custom code will disable right click on either images or lightbox images. In order for this to work simply copy and paste the code found in the Copy this code HTML embed. Keep in mind that this only disables the right click although images can still be downloaded from the web without the right click capabilities.

Here's a technique to add a image based grid to the background of your Webflow site that follows the mouse cursor on the page. A fun technique to adding a dynamic and layered effect with a bit of mouse cursor interaction.

A fun interaction that moves images/divs based on the mouse movement on the Webflow page. A great way of adding a parallax style mouse movement interaction to a Webflow site.

A demonstration of how to create a magnify on hover image effect on Webflow. This is built entirely with interactions and requires no custom code. Please note that this method only works on desktop and will not provide the zoom effect on mobile.

An inclined, horizontal smooth scroll portfolio section created with the power of Webflow interactions. This technique uses no custom code such as Javascript or CSS to implement on your site. Instead this utilizes Webflow's native interactions taking advantage of the While scrolling in view. As the page is scrolled down the interaction moves the cards from right to left. The incline is achieved by utilizing 3D transforms on the cards parent div. Each card has a unique hover effect in which the image moves on hovering of each card. This cloneable is perfect for a portfolio section, features section or much more.

A wonderful CMS image gallery powered by Webflow's native CMS system. This is a great way to add a lightbox styled image gallery that's driven solely by Webflow CMS. Upon click of an image a full page modal window is displayed with other image thumbnails able to be clicked on and viewed within that modal.

A grid layout with parallax style effects in Webflow. This unique grid layout features a text masked headline section and a unique grid that's ready for a parallax style effect. A unique way of demonstrating images and the power of Webflow interactions.

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 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.

A free cloneable fashion site hero section, perfect for a website or portfolio section. This was inspired by a Dribble and to test out the authors expertise in Webflow. Initially starting the design in Figma, and then translating it to Webflow. For the interactions the author utilized Class Adder via Finsweet and for the text animations utilized a javascript library provided by Timothy Ricks.

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 way to create a zoom in on click technique in Webflow. If you need to magnify an image on your Webflow site this cloneable is perfect for you.

Here's a technique for changing the size of CMS elements with a toggle button to give your clients more flexibility in displaying CMS items in Webflow. Each element has a toggle, medium large and align center. When one of those options is active, a class is then added to the grid item via custom code. This then changes the design based on the clients selection. In order for this to work, the embed field in each CMS item and the jQuery code must be added. Tutorial: https://youtu.be/DsuCGRSgJIk

Here's a way to add a image clipping to text in Webflow. This effect allows the text to act like a mask to the image behind it, making the font color take on the image in the background. This method uses Webflow's native designer and doesn't require any type of custom code. Simple choose Clip background to text option for this to work properly.

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.

This is a unique interaction in which images reverse movement based on mouse location in Webflow. There are two images facing opposite directions on both sides of the screen. When ou move your mouse on the x axis the images get further and closer apart. It's a very simple effect but can be modified to create endless opportunities. This used two identical images to save on load time and one was flipped horizontally on the y axis. Both images are set to overflow hidden. Then in interactions a mouse move in viewport interaction was applied to both images and they move on the x-axis.

Here's a way to add zoom in images on click via a native Webflow interaction. Custom code is involved to disable/enable the body scroll only. Be sure to copy the custom code for the body scroll toggle on modal pop up. This is perfect for showcasing a product where zoom-in is required to view the close up details of that product. The interaction works only for desktop and on mobile it will only be normal image without the zoom in effect.

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.

Just about every kind of payment method badge, icon or image you'd need for your Webflow site. This includes payment methods like PayPal, American Express, Visa, Google Pay, Apple Pay, Visa, Stripe, Mastercard. They include images with backgrounds, no backgrounds and much more.

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 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.

Here's a way to have an image slider driven by Webflow's native CMS. In this example they are using slick slider tied to Webflow CMS.

Show/hide image on text link hover.

A unique interaction perfect for portfolio pages or about company pages. As a user scrolls down the page the primary in focus element becomes highlighted and the background changes to a different image. This effect was created from only Webflow interactions and does not use any extra javascript or code snippets. Using Webflow interactions and the scroll into view trigger the opacity of the image changes and the previous items are hidden, while a text effect is accounted for. Overall this is a basic, yet sophisticated Webflow cloneable that will help bring any portfolio to life.

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.

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.

Unlock the power of jQuery with this scrolling 3D cube. A fun way of showcasing images, portfolio items and more.

This dynamic range slider takes a number and calculates the output into a certain number of images in Webflow. A perfect way to implement a range slider with dynamic images based on the clients input and your output settings. Perfect for charities to display the impact of donations of charity donations.

Here's a way to create a CMS driven slider with a lightbox and video modal in Webflow. This slider utilizes Slick slider for the slider effects. Please note that this uses custom code of both CSS and script for the slider.

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.

A perfect product preview card interaction and animation that upon card click shows an image preview modal window in Webflow. A great product card design with pre-built interactions and animations that are perfect for your ecommerce or product/sales pages.

A non-boring, full width image link with hover interactions in Webflow. A perfect way to add a full width section with unique hover interactions for your Webflow site. The bottom one is the one you'll want to copy and paste and use in your Webflow projects.

Here's a way to create a save to PNG or SVG in Webflow for any element you'd like. This is using a dom-to-image library to generate a PNG image or SVG from any of the elements in your design that you'd like and can be triggered once someone clicks a download button. This is perfect for a number of aspects such as allowing a user to download a project quote, testimonials, or any other aspects that a user may need to download an image for.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.