주요 시사점
- 이미지에 대한 Elementor 호버 효과는 이미지 위젯의 스타일 탭, 네 개의 컨트롤이 있는 호버 탭 아래에 있습니다: 불투명도, CSS 필터, 전환 기간 및 호버 애니메이션.
- Elementor의 회색조에서 색상으로의 호버 효과는 코드가 필요하지 않습니다: 일반 탭의 CSS 필터에서 채도를 0으로 설정하고 호버 탭에서 다시 100으로 설정합니다.
- Grow 와 같은 Elementor 의 Hover Animation 사전 설정은 전체 이미지를 이동하고 Grow 사전 설정은 이미지를 호버에서 크기의 110 퍼센트로 확장합니다.
- Elementor의 이미지 위젯은 호버링 시 이미지 위에 제목이나 설명을 표시할 수 없으므로 텍스트 오버레이에는 컨테이너 해결 방법, 사용자 정의 CSS 또는 애드온 위젯이 필요합니다.
- 마스터 애드온 이미지 호버 효과 위젯에는 하나의 호버 효과 드롭다운에서 선택한 이미지 위에 제목과 설명을 애니메이션화하는 30개의 명명된 호버 효과가 있습니다.
Elementor 호버 효과를 이미지에 세 가지 방법으로 추가할 수 있습니다. 이미지 위젯에는 호버 상태에 대한 불투명도와 CSS 필터 설정이 있습니다. 또한 그림을 이동하는 호버 애니메이션 사전 설정도 있습니다. 이미지 위에 나타나는 제목과 설명의 경우 다음과 같이 해당 위젯을 위해 구축된 위젯이 필요합니다 이미지 호버 효과.
이 가이드는 Elementor 4,3 에서 테스트한 정확한 설정으로 각 경로를 다룹니다. 그림만 반응하게 하려면 처음 두 개부터 시작하고,이미지에 텍스트를 표시하려면 세 번째로 건너뜁니다.
목차
Elementor에서 호버 설정이 있는 위치입니다
이미지 위젯을 선택하고 엽니다 스타일 탭과 이미지 섹션 아래를 보세요. 크기 컨트롤 아래에는 일반 및 호버라는 두 개의 탭이 있습니다. 호버 탭의 모든 것은 포인터가 이미지 위에 있는 동안에만 적용됩니다. Elementor 는 그 안에 아이디어를 설명합니다 호버 효과 소개.
| 제어 | 호버에서 하는 일 |
|---|---|
| 불투명도 | 이미지를 0에서 1로 페이드 인 또는 아웃합니다 |
| CSS 필터 | 흐림, 밝기, 대비, 채도 및 색조를 변경합니다 |
| 전환 기간 | 변경 시간이 몇 초 단위로 설정됩니다 |
| 호버 애니메이션 | Grow 와 같은 미리 설정된 동작을 재생합니다 |
방법 1: 불투명도 및 CSS 필터
이미지 자체가 호버링 시 변경되어야 할 때 불투명도와 CSS 필터를 사용하십시오. 고전적인 예는 흑백으로 표시되고 포인터가 도착하면 색으로 변하는 사진입니다.
- 이미지 위젯을 선택하고 엽니다 스타일.
- 에 보통의 탭, 옆에 있는 연필을 클릭합니다 CSS 필터 그리고 드래그하세요 포화 0으로. 이미지가 회색으로 변합니다.
- 로 전환하십시오 호버 탭, 열기 CSS 필터 다시 채도를 100으로 설정합니다.
- 세트 전환 기간 약 0.4로 변하면 색상이 희미해집니다.
- 선택 사항: 불투명도를 일반에서 0.85로 설정하고 호버에서 1로 설정하여 약간 밝게 합니다.
같은 두 탭은 지워지는 흐림,밝아지는 희미한 이미지 또는 색조 변화를 제공합니다. 0,3 초에서 0,5 초 사이의 전환을 유지하십시오. 그보다 짧으면 깜박임처럼 보이고 길면 느려지는 느낌이 듭니다.
방법 2: 호버 애니메이션 사전 설정
호버 애니메이션은 포인터가 위에 있을 때 전체 이미지를 이동합니다. 호버 탭 하단에 있는 드롭다운 1 개이며,다른 설정이 필요하지 않습니다.
- 이미지 위젯을 선택하고 엽니다 스타일, 그럼 호버 탭.
- 오픈 호버 애니메이션 그리고 사전 설정을 선택하세요. 성장하다 는 가장 많은 사람들이 원하는.
- 페이지를 미리 보고 포인터를 이미지 위로 이동합니다.
Grow 는 원래 가장자리를 지나 이미지를 확대하므로,긴밀한 그리드에서 이웃과 겹칠 수 있습니다. 고정 프레임 내부에서 그림을 확대하려면 CSS 몇 줄이 필요합니다.
방법 3: 이미지 위에 텍스트를 위한 위젯입니다
호버의 이미지 위에 제목과 설명이 나타나야 할 때 전용 위젯을 사용하십시오. Elementor 의 이미지 위젯은 그림 아래에 캡션을 표시하고 위에 텍스트를 넣을 설정이 없습니다.
이 단계에서는 마스터 애드온의 이미지 호버 효과 위젯을 사용합니다.
- Elementor로 페이지를 편집하고 위젯 패널을 검색하세요 이미지 호버 효과 그리고 페이지로 드래그하세요.
- 언더 효과 및 이미지, 이미지를 업로드하세요.
- 열다 호버 효과 드롭다운을 하고 30 가지 효과 중 하나를 골라보세요. 릴리,세이디, 록시 그리고 부바를 시작으로 이름별로 나열됩니다.
- 를 입력하세요 제목 그리고 the 설명 자신의 섹션에서.
- 세트 링크 또는 팝업? 클릭이 어딘가로 이동해야 하는 경우.
- 스타일 탭에서 오버레이 색상, 일반 및 호버링의 이미지 불투명도, 각 텍스트 레이어의 타이포그래피를 설정합니다.
당신이 아무것도 설치하기 전에 효과를보십시오. 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개의 효과의 전체 목록도 있습니다.
효과 중 8개는 Pro 라이센스 없이 작동하고 22개는 Master Addons Pro가 필요합니다. 각 위젯에는 하나의 이미지가 있으므로 호버 카드 그리드는 여러 위젯이 나란히 있습니다.
비디오 튜토리얼
이 4 분짜리 비디오는 빈 페이지에서 이미지 호버 효과 위젯을 설정합니다.
어떤 방법을 사용해야합니까?
호버링 시 변경해야 할 항목을 선택하세요: 그림, 위치 또는 그 위에 있는 텍스트.
| 당신은 원해요 | 사용 | 필요 |
|---|---|---|
| 회색조에서 색상까지, 흐릿하게에서 선명하게, 희미하게에서 밝게 | 호버 탭의 CSS 필터 및 불투명도 | 엘리멘터 |
| 이미지가 성장하거나 펄스됩니다 | 호버 애니메이션 | 엘리멘터 |
| 프레임 안에 머무르는 줌입니다 | CSS 클래스와 몇 줄의 CSS | Elementor 및 CSS를 추가할 수 있는 곳 |
| 이미지 위에 제목과 설명이 있습니다 | 이미지 호버 효과 위젯 | 마스터 애드온 |
| 첫 번째를 대체하는 두 번째 이미지 | 고급 이미지 위젯 또는 컨테이너 배경 | 마스터 애드온 또는 Elementor 단독 |
다른 방식으로 결합된 텍스트와 그림에 대해서는 다음을 참조하세요 이미지 위에 요소 텍스트.
호버 효과는 전화기에서 작동합니까?
터치 스크린에는 호버링할 포인터가 없기 때문에 호버링이 아닙니다. Elementor의 스타일 탭 효과는 휴대폰에서 작동하지 않으므로 색상 변경에 해를 끼치지 않습니다.
이미지 호버 효과 위젯을 사용하면 첫 번째 탭은 일반적으로 텍스트를 표시하고 두 번째 탭은 링크를 따라갑니다. 가격이나 이름과 같이 텍스트가 필수인 경우 작은 화면에서도 볼 수 있는 곳에 놓습니다.
자주 묻는 질문
Elementor 에서 이미지에 호버 효과를 추가하려면 어떻게 해야 합니까?
이미지 위젯을 선택하고 스타일 탭을 연 후 호버 탭으로 전환합니다. 호버 상태에 대해 불투명도 또는 CSS 필터를 설정하거나 Grow 와 같은 호버 애니메이션을 선택합니다. 전환 지속 시간을 0,3 ~ 0,5 초로 추가하면 변화가 원활해집니다.
Elementor에는 플러그인 없이 이미지 호버 효과가 있습니까?
예. Elementor 의 Image 위젯에는 불투명도,CSS 필터 및 Hover Animation 사전 설정을위한 호버 컨트롤이 있습니다. 이미지를 변경하거나 이동합니다. 이미지 위의 텍스트에는 애드온 위젯 또는 사용자 정의 CSS 가 필요합니다.
Elementor의 호버링 시 이미지가 흑백에서 컬러로 바뀌도록 하려면 어떻게 해야 합니까?
이미지 위젯의 스타일 탭에서 일반 탭에서 CSS 필터를 열고 채도를 0 으로 설정합니다. 그런 다음 호버 탭에서 CSS 필터를 열고 채도를 100 으로 설정합니다. 전환 지속 시간을 약 0,4 초로 설정합니다.
Elementor 에서 이미지 위로 마우스를 가져갈 때 텍스트를 어떻게 표시합니까?
이를 위해 만들어진 위젯을 사용하십시오. Master Addons 를 사용하여 Image Hover Effects 위젯을 추가하고 이미지를 업로드하고 제목과 설명을 입력하고 Hover Effect 를 선택하십시오. 포인터가 이미지 위에 올 때까지 텍스트는 숨겨져 있습니다.
Elementor 호버 효과가 작동하지 않는 이유는 무엇입니까?
설정이 일반 탭이 아닌 호버 탭에 있는지,전환 지속 시간이 0 이상인지 확인합니다. 휴대폰이나 태블릿에서는 호버가 없으므로 마우스로 테스트합니다. 사용자 정의 CSS 를 사용하는 경우 위젯의 클래스 이름이 코드의 클래스 이름과 일치하는지 확인합니다.
최종 생각
이미지에 대한 Elementor 호버 효과는 세 가지 종류가 있습니다. 스타일 탭은 이미지의 모양을 변경하고,호버 애니메이션이 이미지를 이동하며,텍스트 오버레이에는 위젯이 필요합니다. 내장 컨트롤부터 시작하세요. 시도하는 데 비용이 들지 않기 때문입니다.
이미지에 제목과 설명을 원할 때 이미지 호버 효과 위젯 선택할 수 있는 30가지 효과가 있습니다 가격 페이지 어떤 계획이 모두 포함되어 있는지 보여줍니다.
관련 읽기
