How it works: Each row uses two custom attributes to power the effect. Add data-dir="item" on the row element and data-dir="bg" on the background element inside it. The script detects where your mouse enters and exits and slides the background accordingly. Enter from the top, it slides down. Enter from the bottom, it slides up. Same logic on exit. Built with the Lumos Framework using utility classes and responsive variables. No libraries, no dependencies. Just drop it into any Lumos project and it works out of the box.

nisium,  nisium agency,  nisium.it,  lumosframework,  lumos,  javascript,  hover effect,  interactions