Hover Image List

설계 철학

텍스트 목록만으로는 전달되지 않는 시각 맥락(브랜드·메뉴·작업물)을, 포인터가 머무는 항목 옆에만 띄워 화면을 어지럽히지 않고 보여주는 패턴입니다. 포트폴리오·브랜드 목록·메뉴 내비게이션에 적합합니다.

동작 원칙

• 이미지 스프링 추적 — hover 항목의 수직 중심으로 이미지 패널이 스프링(200/18/0.6) 이동합니다.

• 이미지 크로스페이드 — 항목이 바뀌면 popLayout으로 이전 이미지가 빠지며 새 이미지가 페이드인합니다.

• 항목 시프트 — hover 항목이 +16px 우측 이동(380/30)해 선택 상태를 강조합니다.

• 비활성 디밍 — hover 중이 아닌 항목은 opacity 0.18로 가라앉아 대비를 만듭니다.

• 이탈 복귀 — 리스트 밖으로 나가면 이미지가 축소·페이드아웃되고 전 항목이 복귀합니다.

적용 가능 개발언어