Follow Cursor Inline List

Code Toolkit
Written By Squarestylist Support

What You'll Create

An inline list layout where images follow the cursor when hovering over list items. Items display horizontally with comma separators, and media reveals follow the mouse position.

The Problem It Solves

Standard list sections stack items vertically. When you want a more creative horizontal inline layout with interactive hover images that track the cursor, you need JavaScript for mouse tracking plus custom CSS positioning.

Perfect For

Creative portfolios, Service showcases, Team member lists, Client lists, Interactive navigation

What Makes This Different

This technique uses JavaScript to track cursor position and CSS fixed positioning to move media elements. The inline layout uses flexbox with comma separators. Includes mobile fallback that hides hover images on touch devices.

Details

  • Section Type: Fluid Engine

  • Code Type: JavaScript

  • Prerequisites: List section set to Simple Design, Max Column 1, Space between elements and items set to 0

  • Toolkit Title: Follow Cursor List Inline

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

  • The complete, copy-paste code

  • Video walkthrough explaining how it works

  • The principles behind the technique so you can customize it

  • Access to our private community for support

Get Access to Standout Squarespace →
Squarestylist Support
Previous

Custom Carousel Arrows
Next

Fixed Bottom Right Navigation