Hover Preview List

Hover Preview List turns a list into a project index with a preview that follows the cursor.

Hover Preview List turns a list into a project index with a preview that follows the cursor. Hover a row and its image fades in under the pointer, trailing just behind it. Move to the next row and the picture swaps in place rather than flying back in. Leave, and it fades out while still following. Put your list items in Rows and their images in Previews, in the same order. A preview can be any layer, so a photo, a video or a card all work, and each one is sized to fill the preview box. Seventeen property controls cover preview size, corner radius, offset from the cursor, how closely it follows, fade, grow in, tilt, dimming the other rows, dividers, gap and stacking order. Why it holds up The preview is pinned to the window rather than drawn inside the list, so a section with Clip Content, an overlay, a later section or a page scroll cannot cut it off, cover it or pull it away from the cursor. It keeps working inside your own components and overlays. Nothing listens to the page while the pointer is elsewhere, hidden videos pause, and by default it sits below a custom cursor. Setting up Paste the component link into your Framer project's Insert panel. Nothing to install. Leave Previews empty to try it on placeholders first, and turn on Show On Canvas to see the image while you design. Good to know Every layer in Rows and Previews needs to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work. It responds to a mouse or pen. Phones and tablets have no cursor to follow, so on touch the rows behave as normal rows. Embedded YouTube or Vimeo players inside a preview keep their own playback settings. Regular video and audio pause while their preview is hidden.

Row images that follow the cursor