Hovering over list items reveals a corresponding image preview that smoothly aligns with the active item while inactive items subtly blur.
Hover Preview is an interactive layout where each text item controls a related image preview. As the user moves the pointer across the list, the image container smoothly shifts vertically to align with the hovered item while the corresponding image is brought to the front using dynamic z-index layering. At the same time, non-active items are softly blurred to guide visual focus toward the active entry. This pattern creates a refined editorial-style interaction commonly used in modern portfolio and studio websites.
npm i gsap @gsap/react
Ideal for creative portfolios, photography showcases, studio websites, editorial layouts, and interactive navigation lists where hovering over titles reveals contextual imagery.
Easy-Intermediate
| Prop | Type | Description |
|---|---|---|
| ease | string | Controls the easing curve used when the image preview container moves to align with the hovered item. |
| duration | number | Duration (in seconds) of the vertical movement animation for the image preview container. |
| blur | number | Amount of blur applied to non-active list items to emphasize the currently hovered entry. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code, it is already optimized and production-ready out of the box.
© 2026 dropui.design