Introduction
Create an engaging and interactive experience with this Pixelated Image Hover component for Framer. Designed to add a unique pixelation effect on hover, this Framer resource offers a smooth and intuitive way to showcase images with an eye-catching transformation.
Use it for portfolios, product showcases, interactive galleries, framer templates, personal websites, or any image-based design that needs this effect.
Component Features
Toggle On/Off
Enable or disable the hover effect entirely.
Reverse Effect
You can choose to reverse the effect so that the image starts off as pixelated and gets revealed on hover.
Pixel Size
Customize the size of the pixels for controlling the granularity of the effect when users hover.
Border Radius
Maintain consistency with your design by customizing the border radius of the component. This allows you to create perfectly rounded corners or keep sharp edges, up to you.
Disable Lazy Loading
All images are by default lazy loaded to improve performance and leverage LCP. For images that are above the fold you can disable this to improve the Lighthouse score by serving the largest contentful paint efficiently and delivering a proper experience for visitors.
Transition
You can choose to define the transition at which the effect is shown or hidden on hover.
Image Integration
Easily upload and replace images through the responsive image panel and set alt tags for SEO.
