What it is Two clean hover patterns in one clonable: fast, readable, and easy to brand. Inside Directional Hover Cards: the highlight tile slides in from the side you enter and auto-contrasts with each card’s background (text color flips for perfect readability). Mega-Menu Hover: links reveal with a tidy top-down hover state that feels layered “from behind,” fully keyboard-friendly. Setup (30 sec) Paste the small script in Page Settings → Before </body> on each page. Use the provided structure/classes ([data-directional-hover], [data-directional-hover-item], [data-directional-hover-tile], .mega, .mega__toggle, .mega__panel, .mega__item). Publish. Customize Timing: [data-enter-speed], [data-leave-speed], [data-enter-ease], [data-leave-ease] Direction (cards): [data-type="x" | "y" | "all"] Notes Accessible by default (focus mirrors hover). Overlay ignores pointer events, so links stay clickable.

hoveranimation,  hovereffect,  hover,  mousehover,  cardhover,  hovermenu,  animation,  custom animations,  cardanimation,  hovercard,  backgroundcolor,  backgroundcolorswitch,  background color change,  cardcolorchange,  colorhoverchange