주요 시사점
- Elementor 의 CSS 이미지 호버 효과는 두 단계를 거칩니다: 고급,CSS 클래스 아래의 이미지 위젯에 클래스 이름을 추가한 다음 해당 클래스를 대상으로 하는 CSS 규칙을 붙여넣습니다.
- 이 가이드의 5가지 CSS 이미지 호버 효과는 프레임 내부의 줌, 회색조에서 색상으로, 그림자가 있는 리프트, 어두운 오버레이 및 위로 미끄러지는 캡션입니다.
- Elementor Pro는 모든 위젯의 고급 탭에 사용자 정의 CSS 상자를 가지고 있으며 Pro가 없으면 동일한 CSS가 모양, 사용자 정의, 추가 CSS로 이동할 수 있습니다.
- Elementor의 Image 위젯은 그림 안에 자막을 무화과 자막으로 인쇄하는데, 이것이 바로 CSS만으로 슬라이딩 자막을 가능하게 하는 것입니다.
- 색상 및 불투명도에 대한 회색조 변경은 Elementor에서 CSS가 필요하지 않습니다. 이미지 위젯의 스타일 탭에는 이미 호버 탭에 CSS 필터와 불투명도가 있기 때문입니다.
CSS 이미지 호버 효과는 Elementor에서 어디서나 작동하는 것과 동일한 방식으로 작동합니다: 요소에 대한 클래스와 규칙 :hover. Elementor 전용 부분은 클래스를 입력하는 곳과 CSS 를 붙여넣는 곳입니다. 아래에는 복사할 수 있는 5 가지 효과가 있으며,각각 표준 Image 위젯으로 Elementor 4,3 에서 테스트되었습니다.
코드를 터치하지 않으려면 마지막 섹션에 코드가 없는 경로가 표시됩니다 이미지 호버 효과 위젯.
목차
Elementor 에서 CSS 호버 효과가 작동하는 방식
아래의 모든 스니펫은 동일한 패턴을 따릅니다. Image 위젯에 클래스를 부여하면 포인터가 위에 있을 때 CSS 가 해당 위젯 내부의 이미지를 변경합니다.
- Elementor 에서 이미지 위젯을 선택합니다.
- 열다 고급 탭하고 찾기 CSS 클래스.
- 예를 들어 점 없이 클래스 이름을 입력합니다
hover-zoom. - 일치하는 CSS 를 사이트에 한 번 추가합니다. 그런 다음 해당 클래스가 있는 모든 이미지가 효과를 얻습니다.
클래스는 위젯의 외부 요소에 도달하고 그림은 입니다 img 그 안에, 그래서 규칙은 타겟 .hover-zoom img.
CSS를 추가할 위치
설치된 내용에 따라 CSS를 붙여넣을 수 있는 장소가 4개 있습니다.
| 장소 | 필요 | 에 적용 |
|---|---|---|
| 위젯, 고급, 사용자 정의 CSS | 엘리멘터 프로 | 그 위젯 |
| 사이트 설정, 사용자 정의 CSS | 엘리멘터 프로 | 전체 사이트 |
| 외관, 사용자 정의, 추가 CSS | 워드프레스만 | 전체 사이트 |
| 사용자 정의 CSS 확장 | 마스터 애드온 | 추가하는 요소 |
재사용하려는 수업의 경우 사이트 전체의 장소가 더 나은 집입니다. The 사용자 정의 CSS 확장 페이지에서는 Master Addons 옵션이 어떻게 작동하는지 설명합니다.
복사할 CSS 이미지 호버 효과 5개
각 효과에는 클래스 이름, CSS 및 호버링 전과 호버링 중 결과의 스크린샷이 있습니다.
1. 프레임 내부 확대
상자가 동일한 크기를 유지하는 동안 이미지의 크기가 커집니다. 클래스 이름: hover-zoom.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
2. 색깔에 회색조
이미지는 흑백으로 표시되며 호버링 시 풀 컬러로 전환됩니다. 클래스 이름: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. 그림자로 들어올리기
이미지가 몇 픽셀 위로 이동하고,카드를 집어드는 것처럼 부드러운 그림자를 얻습니다. 클래스 이름: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. 어두운 오버레이
이미지 위로 어두운 레이어가 페이드 인됩니다. 의사 요소로 빌드되므로 추가 마크업이 필요하지 않습니다. 클래스 이름: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. 위로 미끄러지는 자막
이미지 자체의 캡션은 하단 가장자리 아래에 숨겨져 있다가 호버링 시 위로 미끄러집니다. 이미지 위젯에서 설정 캡션 사용자 정의 캡션에 텍스트를 먼저 입력합니다. 클래스 이름: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
이것은 캡션이 거기에 있는지에 따라 다릅니다. 캡션이 없으면 Elementor는 그림과 그림 캡션을 인쇄하지 않으며 규칙은 움직일 것이 없습니다.
CSS 또는 내장 호버 설정?
CSS 를 작성하기 전에 Elementor 의 자체 컨트롤을 확인하십시오. 왜냐하면 이 다섯 가지 효과 중 두 가지가 설정으로 존재하기 때문입니다. 이미지 위젯의 스타일 탭에는 불투명도,CSS 필터 및 호버 애니메이션이 있는 호버 탭이 있습니다.
| 효과 | Elementor에 내장되어 있나요? | CSS 를 사용하는 이유 |
|---|---|---|
| 회색조에서 색상으로 | 예, CSS 필터, 포화 | 많은 이미지를 위한 하나의 클래스 |
| 줌 | 부분적으로.grow 는 프레임을 지나 확대됩니다. | 프레임 내부에 줌을 유지하려면 |
| 그림자로 들어 올리기 | 아니요 | Elementor에는 이에 대한 설정이 없습니다 |
| 다크 오버레이 | 아니요, 이미지 위젯에 있습니다 | 이미지를 컨테이너에 포장하지 않는 한 필요합니다 |
| 슬라이딩 캡션 | 아니요 | 호버 위젯을 사용하지 않는 한 필요합니다 |
내장된 설정은 단계별로 다룹니다 elementor 에서 이미지 호버 효과를 추가하는 방법. 일반적인 기술은 에 문서화되어 있습니다 :hover 의사 클래스에 대한 MDN 페이지입니다.
코드 없는 경로입니다
CSS 는 그림 자체에 대한 간단한 효과에 적합합니다. 일단 제목과 이미지에 애니메이션으로 적용되는 설명을 원하면 CSS 는 빠르게 성장하고 모든 디자인 변경 시 이를 유지해야 합니다.
Master Addons의 Image Hover Effects 위젯은 이를 드롭다운으로 대체합니다. 여기에는 30개의 효과, 각 이미지의 제목 및 설명, 색상 및 유형에 대한 스타일 탭 컨트롤이 있습니다.
그들이 사는 것을 보세요. X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 이미지 호버 효과 위젯 페이지 8장의 카드를 가지고 있고 30가지 효과가 모두 담긴 테이블이 있습니다.
자주 묻는 질문
Elementor 의 이미지에 CSS 호버 효과를 추가하려면 어떻게 해야 합니까?
이미지 위젯을 선택하고 고급 탭을 열고 CSS 클래스에 클래스 이름을 입력합니다. 그런 다음 해당 클래스에 대한 CSS 규칙을 : hover, 예를 들어.hover-zoom: hover img {transform: scale(1.08); }. Elementor Pro의 사용자 정의 CSS 또는 모양, 사용자 정의, 추가 CSS에 CSS를 붙여넣습니다.
Pro 없이 Elementor 에서 사용자 정의 CSS 를 어디에 넣습니까?
WordPress 대시보드에서 모양,사용자 지정,추가 CSS 로 이동하여 거기에 붙여 넣습니다. CSS 는 모든 페이지에 로드되므로 일치하는 클래스가 있는 모든 위젯이 이를 선택합니다. 애드온에서 사용자 정의 CSS 확장은 또 다른 옵션입니다.
왜 CSS 호버 효과가 Elementor 에서 작동하지 않습니까?
일반적인 원인은 CSS Classes 필드에 입력된 점,CSS 와 일치하지 않는 클래스 이름 또는 캐시된 스타일시트입니다. 점이 없는 클래스를 입력하고 철자를 비교한 다음 도구에서 캐시 플러그인과 Elementor 의 파일을 지웁니다.
이미지 줌 온 호버를 넘치지 않고 만들 수 있나요?
예. 클래스를 전달하는 위젯에 오버플로를 숨기기로 설정하고 그 안에 있는 img 를 확장합니다. 위젯은 크기를 유지하고 확대된 이미지를 클립합니다. 이 가이드의 첫 번째 스니펫은 이렇게 합니다.
CSS 호버 효과는 모바일에서 작동합니까?
전화기에는 호버 상태가 없으므로 효과는 절대 표시되지 않거나 탭 후 표시되며 방문자가 다른 곳을 탭할 때까지 유지됩니다. 호버 효과를 작은 화면의 장식으로 취급하고 중요한 텍스트가 없으면 계속 표시됩니다.
최종 생각
Elementor 의 CSS 이미지 호버 효과는 이미지 위젯에 대한 클래스와 짧은 규칙이 필요합니다. 여기 다섯 개는 줌,색상, 리프트,오버레이 및 슬라이딩 캡션을 다루며 각각 하나 또는 두 개의 값을 변경하여 조정할 수 있습니다.
원하는 효과에 이미지 위에 텍스트가 포함되면 이미지 호버 효과 위젯 CSS를 유지하지 않고 거기에 도착합니다.
관련 읽기
