워드프레스 Divi 테마에서는 코딩 없이도 Divi 테마 텍스트 Hover 효과를 만들 수 있다. 마우스를 올리면 가려져 있던 텍스트가 부드럽게 떠오르는 연출인데, 핵심은 Divi가 거의 모든 디자인 설정에 제공하는 Hover 상태(hover state) 토글과 불투명(opacity) 필터, 그리고 전환(transition) 설정 세 가지다. 이 글에서는 그 원리와 설정 흐름을 정리하고, 같은 효과를 순수 CSS로 만드는 방법까지 함께 다룬다. (참고: 이미지가 모두 유실되어 텍스트와 코드 중심으로 재정리했다.)
Hover 효과란 무엇인가
Hover 효과는 마우스 커서가 요소 위에 올라간 순간(:hover 상태)에만 적용되는 스타일 변화를 말한다. 평소 상태와 Hover 상태에 서로 다른 값을 주고, 그 사이를 전환(transition)으로 이어 주면 색이 바뀌거나 요소가 커지거나, 숨어 있던 텍스트가 서서히 나타나는 동적인 연출이 만들어진다. 텍스트 Hover 효과의 원리도 같다. 평소에는 텍스트의 불투명도를 0%로 두어 보이지 않게 하고, Hover 상태에서 100%로 올려 나타나게 하는 것이다.
Divi에서 Hover 옵션을 켜는 법
Divi는 섹션·행·열·모듈의 콘텐츠·디자인·고급 설정 대부분에 Hover 상태를 따로 지정할 수 있다. 방법은 단순하다. 모듈 설정 창에서 값을 바꾸려는 옵션 위에 마우스를 올리면 작은 커서(마우스) 아이콘이 나타나는데, 이 아이콘을 클릭하면 데스크탑(기본) 상태와 Hover 상태 탭이 갈라진다. 각 탭에 다른 값을 입력하면 끝이다. 단, 커서 아이콘이 보이지 않는 옵션은 Hover를 지원하지 않는다.
텍스트 Hover 효과에서 실제로 사용하는 설정은 다음과 같다.
- 디자인 > 필터 > 불투명(Opacity) — Hover 토글을 켠 뒤 기본 0%, Hover 100%로 설정
- 디자인 > 크기 조정 / 배경 — 텍스트 모듈의 높이·배경색·명암을 조정해 텍스트가 들어설 영역을 만든다
- 고급 > 전환(Transitions) — 전환 지속 시간(Duration)과 속도 곡선(Speed Curve)을 지정해 변화가 매끄럽게 이어지게 한다
Divi 텍스트 Hover 효과 만들기
전체 흐름은 다음 순서로 진행한다.
- 효과를 적용할 텍스트 모듈을 생성한다.
- 열(Column) 설정에서 배경 이미지를 넣어 평소에 보일 화면을 만든다.
- 텍스트 설정 > 크기 조정에서 높이를 충분히(예: 500px) 잡아 텍스트가 덮을 영역을 확보한다.
- 텍스트 설정 > 배경에서 텍스트가 떠오를 때 깔릴 배경색과 명암을 지정한다.
- 표시할 텍스트를 입력하고 글꼴·크기·여백을 다듬는다.
- 디자인 > 필터 > 불투명에서 커서 아이콘을 눌러 Hover를 켜고, 기본 0%·Hover 100%로 설정한다. 이렇게 하면 평소엔 안 보이다가 마우스를 올렸을 때만 텍스트가 나타난다.
- 고급 > 전환에서 지속 시간을 길게(예: 1300ms) 주면 천천히, 짧게 주면 빠르게 나타난다. 속도 곡선은 ease 계열로 자연스럽게 둔다.
숫자가 클수록 전환이 느려지므로, 불투명 값과 전환 시간을 바꿔 가며 원하는 분위기를 찾으면 된다.
같은 효과를 CSS로 직접 구현하기
Divi가 클릭만으로 만들어 주는 결과물은 결국 표준 CSS의 :hover와 transition이다. 원리를 이해해 두면 다른 테마나 빌더에서도 그대로 응용할 수 있다. 아래는 위와 동일한 “평소엔 숨고 Hover 시 떠오르는 텍스트”를 순수 CSS로 옮긴 예시 코드다(원본 UI 설정값을 그대로 재현한 것이 아니라 일반적인 표준 예시다).
.hover-box {
position: relative;
height: 500px;
background-image: url("배경이미지.jpg");
background-size: cover;
}
.hover-box .hover-text {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5); /* 텍스트 배경 명암 */
color: #fff;
opacity: 0; /* 평소: 숨김 */
transition: opacity 1300ms ease;
}
.hover-box:hover .hover-text {
opacity: 1; /* Hover: 나타남 */
}transition 한 줄이 핵심이다. 이 속성이 없으면 0%에서 100%로 한순간에 툭 바뀌고, 있으면 지정한 시간(1300ms) 동안 부드럽게 이어진다. 같은 방식으로 색 변화나 확대 효과도 만들 수 있다.
.btn {
color: #333;
transition: color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
color: #e44d26; /* 글자색 전환 */
transform: translateY(-3px) scale(1.05); /* 살짝 떠오르며 확대 */
}정리
Divi 텍스트 Hover 효과의 정체는 Hover 상태 토글 + 불투명 필터(0%↔100%) + 전환 설정의 조합이다. Divi에서는 옵션 위에 뜨는 커서 아이콘으로 Hover 값을 따로 지정하고, 그 내부는 CSS :hover와 transition으로 동작한다. 원리를 알면 코드 한 줄로도, 빌더의 클릭 몇 번으로도 같은 결과를 만들 수 있다.
참고로 누스쿨은 현재 Divi가 아닌 Elementor를 사용한다. Elementor 역시 위젯·컬럼의 디자인 설정에 Normal/Hover 탭과 Hover Animation, 전환 시간(Transition Duration) 컨트롤을 제공하므로, 이 글의 개념과 CSS는 Elementor 환경에서도 그대로 통한다.
💬 댓글 0