워드프레스 Divi 테마 이미지 위 텍스트 슬라이드 업 효과

이미지 위로 텍스트 슬라이드 업 효과는 평소에는 이미지만 보이다가 마우스를 올리면 설명 텍스트가 아래에서 위로 미끄러져 올라와 이미지를 덮는 인터랙션이다. 포트폴리오 갤러리, 카드형 메뉴, 팀 소개 영역에서 자주 쓰인다. 이 글은 워드프레스 Divi 테마를 기준으로 이 효과의 원리를 정리하고, 어떤 빌더에서도 그대로 옮겨 쓸 수 있는 표준 CSS 예시를 함께 제공한다. 핵심은 빌더 버튼이 아니라 overflow:hidden + transform: translateY + transition 세 가지 CSS 속성의 조합이다.

슬라이드 업 효과의 동작 원리

이 효과는 애니메이션 플러그인이나 자바스크립트 없이 순수 CSS만으로 구현된다. 구조와 동작을 분해하면 다음과 같다.

• 겹쳐 쌓기 — 이미지를 담는 컨테이너 안에, 설명 텍스트(캡션) 박스를 position:absolute로 이미지 위에 겹쳐 배치한다.
• 초기 숨김 — 캡션 박스를 transform: translateY(100%)로 컨테이너 높이만큼 아래로 밀어 화면 밖으로 내보낸다.
• 넘침 자르기 — 컨테이너에 overflow:hidden을 줘서 아래로 밀려난 캡션이 컨테이너 밖으로는 보이지 않게 잘라낸다.
• 마우스 올리면 복귀 — :hover 상태에서 캡션을 translateY(0)으로 되돌리면, 아래에 숨어 있던 캡션이 위로 올라오며 이미지를 덮는다.
• 부드러운 전환 — transition 속성이 이 위치 변화를 0.3초 같은 일정 시간에 걸쳐 자연스럽게 보간한다.

정리하면 “캡션을 미리 컨테이너 아래에 숨겨 두고, 호버 시 위로 올라오게 한다”가 전부다. 슬라이드 방향을 바꾸고 싶으면 translateY를 translateX로 바꿔 좌우 슬라이드로, 또는 opacity만 조절해 페이드 인으로도 변형할 수 있다.

표준 CSS 예시 코드

아래는 빌더에 종속되지 않는 표준 마크업과 CSS다. 그대로 복사해 동작을 확인한 뒤, Divi라면 코드(Code) 모듈에 넣거나 각 모듈의 사용자 맞춤 CSS 칸에 옮겨 쓰면 된다. 클래스 이름과 수치(높이·전환 시간)는 자유롭게 조정한다.

<div class="slide-card">
  <img src="이미지경로.jpg" alt="설명 텍스트">
  <div class="slide-caption">
    <h3>프로젝트 제목</h3>
    <p>마우스를 올리면 올라오는 설명입니다.</p>
  </div>
</div>

/* 1) 컨테이너: 넘치는 캡션을 잘라낸다 */
.slide-card {
  position: relative;
  width: 100%;
  height: 300px;        /* 이미지 영역 높이 */
  overflow: hidden;     /* 아래로 숨긴 캡션을 가린다 */
}

.slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2) 캡션: 평소엔 컨테이너 아래에 숨겨 둔다 */
.slide-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  transform: translateY(100%);   /* 컨테이너 높이만큼 아래로 */
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 3) 마우스를 올리면 위로 슬라이드 업 */
.slide-card:hover .slide-caption {
  transform: translateY(0);
  opacity: 1;
}

핵심만 다시 짚으면, .slide-card의 overflow:hidden과 .slide-caption의 transform: translateY(100%)가 평소 숨김을 만들고, :hover 시 translateY(0)으로 복귀시키는 한 쌍이 효과의 본체다. transition이 없으면 슬라이드가 아니라 즉시 나타났다 사라지는 깜빡임이 되니 반드시 함께 넣는다.

Divi 테마에 적용할 때 짚을 점

Divi에서 같은 효과를 빌더 모듈로 구성할 때도 결국 위 CSS 원리가 그대로 작동한다. UI 메뉴 이름은 Divi 버전에 따라 달라질 수 있으니, 버튼 경로보다 다음 개념 매핑을 기준으로 삼는 편이 안전하다.

• 겹치기 — 한 열(column)에 이미지와 텍스트(안내문/Blurb) 모듈을 같은 영역에 배치하고, 캡션 모듈을 절대 위치로 이미지 위에 겹친다.
• 넘침 숨김 — 열 또는 행 설정의 “보이기/오버플로(overflow)” 옵션을 숨김(hidden)으로 둬 컨테이너 밖 캡션을 가린다. CSS의 overflow:hidden에 해당한다.
• 위치·전환 — 캡션 모듈의 여백(margin)으로 평소 아래에 숨겨 두고, 고급 → 전환(transition) → 지속 시간으로 슬라이드 속도를 조절한다. 값이 클수록 느리게 올라온다.
• 가장 단순한 방법 — 위 예시 마크업·CSS를 Divi 코드 모듈에 통째로 넣으면 빌더 옵션 의존 없이 동일하게 동작한다. 유지보수도 이 방식이 가장 깔끔하다.

높이(예: height:300px)나 내부 여백 같은 수치는 디자인에 맞춰 조정하면 된다. 모바일에서는 호버 자체가 없으므로, 터치 기기에서는 캡션을 항상 보이게 하거나 탭 시 표시되도록 별도 처리하는 것을 권장한다.

참고 — 누스쿨은 현재 Elementor 기반

이 글은 작성 당시 Divi 테마 기준으로 쓰였고, 보관·검색을 위해 그대로 유지한다. 다만 현재 누스쿨(nuschool.cc)은 Elementor로 운영된다. Elementor에서는 이 효과를 직접 CSS로 짜지 않아도 비슷하게 만들 수 있다. 이미지 위젯 또는 콜투액션(Call to Action) 위젯의 호버 애니메이션, 또는 박스/이미지에 캡션을 겹친 뒤 모션 효과(Motion Effects)와 호버 상태를 조합하면 같은 “호버 오버레이/슬라이드 업” 결과를 얻는다. 빌더가 바뀌어도 위에서 설명한 overflow:hidden + translateY + transition이라는 원리는 동일하므로, 위젯의 사용자 정의 CSS 칸에 예시 코드를 넣어 그대로 재현해도 된다.

정리

이미지 위로 텍스트가 올라오는 슬라이드 업 효과의 본질은 세 줄로 요약된다. 컨테이너에 overflow:hidden, 캡션에 transform: translateY(100%)로 미리 숨기기, :hover 시 translateY(0) + transition으로 부드럽게 올리기. 이 원리만 잡으면 Divi든 Elementor든, 혹은 순수 HTML이든 빌더에 상관없이 동일한 인터랙션을 구현할 수 있다. 방향·속도·배경 투명도만 바꿔도 다양한 변형이 가능하니, 위 예시를 시작점으로 디자인에 맞게 다듬어 쓰면 된다.