How can I create a looped distortion effect on a selected picture in Webflow without any interaction on hover?

Creating a looped distortion effect on a picture in Webflow can provide an engaging visual without needing user interaction. Below is a step-by-step guide to achieve this effect.

​

1. Prepare the Image

• Select the Image: Ensure you have the image you want to apply the effect to available in your Webflow assets.
• Image Dimensions: Consider using an image with dimensions that suit your layout to ensure consistency.

​

2. Add the Image to Your Project

• Go to the Designer: Open your project in Webflow and navigate to the page or section where you want to place the image.
• Add the Image: Drag an Image element from the Elements panel into the desired section or container.

​

3. Create the Looped Distortion Effect

• Add a Class: Click on the image and add a class to it for easier styling.
• Use CSS Filters: Utilize custom code to apply a distortion effect with CSS filters. Since Webflow doesn’t directly support distortion natively, you'll need to implement a CSS animation for this:

​

• Go to Project Settings: Click on Project Settings and navigate to the Custom Code tab.
• Add Custom CSS: Insert the following CSS into your project’s Head Code section:

    ```css

    <style>

      .looped-distortion {

        animation: distortion 5s infinite;

      }

​

      @keyframes distortion {

        0%, 100% { filter: none; }

        33% { filter: blur(5px); }

        66% { filter: contrast(150%); }

      }

    </style>

    ```

• Adjust the filter values as needed to customize the distortion effect.

​

4. Apply the Custom Code

• Return to Designer: Go back to the Designer and ensure the class you added to the image earlier matches the class used in your custom CSS (.looped-distortion).
• Publish the Site: For the effect to be visible on a live site, make sure to publish your project.

​

Summary

To create a looped distortion effect on an image in Webflow, add the image to your project, apply a class, and use custom CSS with keyframe animations to achieve the looping effect. This solution will provide a dynamic visual without requiring user interaction. Be sure to publish your site to see the effects in action.