---
title: "Pixelate Image — Free Framer component · Best of Framer"
description: "Free Framer component · by Soubhagya Sahu · Interactive. An interactive image component that creates a pixelation effect on hover with customizable intensity."
canonical: "https://framer.elliotli.dev/component/pixelate-image"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Pixelate Image

# Pixelate Image

[View on Framer](https://framer.com/marketplace/components/pixelate-image/?via=elliot-li)

![Pixelate Image preview image 1](https://framer.elliotli.dev/og/component/pixelate-image/87dfca3fdb27d9c2/1600x1200.jpg)

## Summary

An interactive image component that creates a pixelation effect on hover with customizable intensity.

## Description

An interactive image component that creates a pixelation effect on hover with customizable intensity. Perfect for creative portfolios, retro-style websites, gaming projects, and artistic image displays with smooth, canvas-based rendering.

**Features:**

**Pixelation Effect:**

-   Adjustable pixelation intensity (0-100%) with percentage control
    
-   Canvas-based rendering for authentic pixel/mosaic effect
    
-   Smooth transition between normal and pixelated states
    
-   Real-time preview in Framer canvas
    

**Reverse Effect Mode:**

-   Normal mode: Starts pixelated → Clears on hover
    
-   Reverse mode: Starts clear → Pixelates on hover
    
-   Easy toggle between both modes
    
-   Perfect for different interaction styles
    

**Visual Enhancements:**

-   Brightness control on hover (0-200%)
    
-   Optional zoom/scale effect (1.05x magnification)
    
-   Customizable border radius (0-200px) for rounded corners
    
-   Combine multiple effects for unique styles
    

**Animation Controls:**

-   Adjustable transition speed (0.1-2 seconds)
    
-   7 easing curve options (Linear, Ease In/Out, Circ)
    
-   Smooth, hardware-accelerated animations
    
-   No janky transitions
    

**Image Handling:**

-   Responsive image upload with automatic optimization
    
-   Auto-sizing to match image dimensions
    
-   Maintains natural aspect ratio
    
-   Works with any image format (JPG, PNG, WebP, etc.)
    

**Interaction:**

-   Reveals on mouse hover
    
-   Returns to the original state on mouse leave
    
-   Touch-friendly for mobile devices
    
-   Instant visual feedback
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4839

## Details

- **Author**: Soubhagya Sahu
- **Published**: 2025-10-28
- **Updated**: 2025-11-29
- **Added**: 2025-10-15
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase