Hover 구조 도식화

<div class="card tab1">    ← 카드 하나 (탭1 소속)

    (카드 배경 + 상품 이미지)

    <div class="sub_box1"> ← 카드 위를 덮는 박스 (버튼, 텍스트)
        버튼1
        버튼2
    </div>
</div>

관계 구조

.card.tab1
- position: relative (기준 잡음)
- overflow: hidden (sub_box1 삐져나오는 거 방지)
  
  ⬇ (자식)
.sub_box1
- position: absolute (카드 덮음)
- top: 0, left: 0, width: 100%, height: 100%
- transform: translateY(120%) (처음에 아래에 숨겨둠)

동작 흐름

[ 평소 상태 ]
- .card.tab1 는 보인다.
- .sub_box1 은 translateY(120%)로 밑으로 내려가 숨어있다.


[ .tab1 에 마우스 hover 하면 ]
- .sub_box1 에 transform: translateY(0%) 적용 → 올라온다
- 동시에 opacity: 0.5 적용 → 반투명해진다

핵심

부모(.tab1) hover → 자식(.sub_box1) 올라오기 + 흐려지기

숨은 놈(sub_box1)한테 직접 hover 거는 거 아님. 부모(.tab1) 기준으로 hover 감지.

요약:

.tab1 = hover 감지
.sub_box1 = absolute 덮개
hover하면 sub_box1에 transform + opacity 먹이기

도식화 (그림 버전)

┌──────────────────────────────┐   ← .card.tab1 (부모, position: relative)
│                               │
│   ┌──────────────────────┐   │   
│   │                      │   │   
│   │    (카드 기본 내용)    │   │   
│   │  상품 이미지/배경 등   │   │   
│   │                      │   │   
│   └──────────────────────┘   │   

│   ┌──────────────────────┐   │   ← .sub_box1 (자식, position: absolute)
│   │                      │   │   
│   │   버튼1   버튼2       │   │   (처음엔 translateY(120%)로 밑에 숨어있음)
│   │                      │   │   
│   └──────────────────────┘   │   

└──────────────────────────────┘

흐름

단계	설명
평소	`.sub_box1`은 카드 안에 있지만 `transform: translateY(120%)`로 밑으로 숨겨져 있다
`.tab1`에 hover	`.sub_box1`이 `transform: translateY(0%)`로 올라오고, `opacity: 0.5`가 적용된다
결과	카드 위에 반투명 레이어가 덮이고, 버튼 두 개가 보인다

[평소] 
카드 ▷ 보임
sub_box1 ▷ 숨겨져 있음

[hover]
카드 ▷ hover 감지
sub_box1 ▷ 위로 슬라이드 + 흐려짐