Elementor에서 호버링 시 이미지를 확대하거나 변경하는 방법

주요 시사점

• Elementor에는 호버링 시 이미지를 변경하는 단일 설정이 없으므로 이미지 뒤의 컨테이너 배경이나 두 번째 이미지를 허용하는 위젯을 사용하여 교환이 수행됩니다.
• Elementor 에서 호버링 시 이미지를 변경하는 플러그인 없는 방법은 두 번째 이미지를 컨테이너 배경으로 설정하고 이미지 위젯의 호버 불투명도를 0 으로 설정하는 것입니다.
• 마스터 애드온 고급 이미지 위젯은 콘텐츠 탭의 이미지 호버 섹션에 있는 호버 이미지 표시라는 하나의 스위치로 이미지를 교환합니다.
• Elementor의 호버 애니메이션 사전 설정 Grow는 호버에서 이미지를 110 퍼센트로 확대하고 이미지는 원래 가장자리를 지나서 커집니다.
• 프레임 내부에 있는 호버를 확대하려면 이미지 위젯의 CSS 클래스와 숨겨진 오버플로 내에서 이미지를 확장하는 세 가지 짧은 CSS 규칙이 필요합니다.

Elementor 에서 호버링에 대한 이미지를 변경하려면 첫 번째 이미지 뒤 또는 내부에 두 번째 이미지를 넣고 포인터가 도착하면 공개합니다. Elementor 는 컨테이너 배경을 통해 플러그인 없이도 이 작업을 수행할 수 있으며 호버링 이미지 위젯은 하나의 스위치로 호버링에 대한 확대 작업은 기본 줌에 대해 하나의 사전 설정 또는 프레임에 유지되는 줌에 대해 몇 줄의 CSS 를 사용합니다.

아래의 네 가지 방법은 모두 Elementor 4.3에서 구축되고 테스트되었습니다.

어떤 방법을 사용할 것인가

이 방법 중 두 가지는 이미지를 교환하고 두 가지는 이미지를 확대합니다. 각 쌍 내에서 하나는 Elementor 만 사용하고 다른 하나는 더 빠르거나 깔끔합니다.

컨테이너 배경으로 호버의 이미지 변경하기

이 방법은 플러그인이 필요하지 않습니다. 두 번째 이미지는 컨테이너의 배경이며,첫 번째 이미지는 일반 이미지 위젯으로 그 위에 있습니다. 호버링 시 상단 이미지가 페이드 아웃되고 배경이 끝까지 표시됩니다.

1. 컨테이너를 추가하고 패딩을 0 으로 설정합니다.
2. 컨테이너의 스타일 탭, 열기 배경를 선택하고 클래식을 선택하고 호버에 표시되어야 하는 이미지를 업로드합니다. 위치를 가운데 중심으로 설정하고 크기를 덮도록 설정합니다.
3. 드래그 앤 이미지 컨테이너에 위젯을 넣고 먼저 표시할 이미지를 선택합니다.
4. 이미지 위젯을 선택하고 엽니다 스타일 그리고 로 전환하세요 호버 탭.
5. 세트 불투명도 0 과에 전환 기간 약 0.4로.

같은 비율의 두 이미지를 사용합니다. 컨테이너는 이미지 위젯에서 높이를 가져와 다른 모양의 배경이 잘립니다.

호버 이미지 위젯으로 호버의 이미지를 변경합니다

호버 이미지 필드가 있는 위젯은 하나의 패널에서 동일한 스왑을 수행합니다. 아래 단계에서는 다음을 사용합니다 고급 이미지 위젯 마스터 애드온에서.

1. 위젯 패널을 검색하세요 고급 이미지 그리고 페이지로 드래그하세요.
2. 에서 이미지 섹션, 메인 이미지를 선택하세요.
3. 열다 이미지를 호버링합니다 섹션 및 켜기 호버 이미지를 표시합니다.
4. 나타나는 필드에서 두 번째 이미지를 선택합니다.
5. 페이지를 미리 보고 마우스를 가져가세요.

위젯은 또한 제품 사진에 맞는 리본, 링크 및 라이트 박스를 가지고 있습니다: 먼저 앞면보기, 호버에 뒷면보기, 모서리에 새 리본.

호버에 텍스트를 원하십니까? 이미지 호버 효과 하나의 이미지에 제목과 설명을 애니메이션으로 만들고, 30 개의 효과를 선택할 수 있습니다.

Grow 사전 설정을 사용하여 호버링 시 이미지를 확대합니다

가장 빠른 줌은 사전 설정입니다. 이미지 위젯을 선택하고 엽니다 스타일, 로 전환하세요 호버 탭 및 설정 호버 애니메이션 에 성장하다. 포인터가 위에 있는 동안 이미지는 110 퍼센트로 확장됩니다.

Grow 는 주변에 공간이 있는 단일 이미지에 잘 작동합니다. 단단한 격자에서 옆에 있는 이미지와 겹치므로 다음 방법을 사용하십시오.

프레임 내부의 호버링 시 이미지를 확대합니다

그림의 자체 상자 안에 머무르는 줌의 경우 이미지 위젯에 CSS 클래스를 부여하고 세 가지 규칙을 추가합니다.The widget keeps its size, and the image scales up inside it.

1. 이미지 위젯을 선택하고 엽니다 고급. 안에 CSS 클래스, 유형 hover-zoom.
2. 귀하의 사이트에 아래의 CSS를 추가하십시오.

.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); }

CSS 가 어디로 가는지는 설정에 따라 다릅니다. Elementor Pro 에는 고급 탭에 사용자 정의 CSS 상자가 있습니다. 이 상자가 없으면 WordPress 에서 모양,사용자 지정,추가 CSS 또는 사용자 정의 CSS 확장 마스터 애드온에서. 더 강력한 줌을 위해 1.08 을 1.15 로 변경하십시오.

잘못되는 네 가지

이러한 효과의 대부분의 문제는 이미지 크기와 잘못된 장치에 대한 테스트에서 비롯됩니다.

1. 두 이미지는 서로 다른 비율을 가지고 있습니다. 그런 다음 스왑이 점프하거나 자릅니다. 동일한 너비와 높이로 둘 다 내보냅니다.
2. 확대된 이미지는 가까운 콘텐츠를 다룹니다. Grow 에는 프레임이 없습니다. 이미지가 가까이 있을 때 CSS 메서드를 사용합니다.
3. 전화기에서는 아무 일도 일어나지 않습니다. 터치 스크린에는 호버가 없습니다. 전화 방문자가 두 번째 이미지를 결코 볼 수 없기 때문에 첫 번째 이미지가 단독으로 작동하는지 확인하십시오.
4. 호버 이미지가 무겁습니다. 두 파일을 모두 압축합니다. 왜냐하면 큰 두 번째 이미지는 첫 번째 호버에서 빈 플래시로 표시될 수 있기 때문입니다.

자주 묻는 질문

최종 생각

Elementor 에서 호버링 시 이미지를 변경하려면 페이드 이미지 위젯이 있는 컨테이너 배경 또는 호버 이미지 필드가 있는 위젯을 사용합니다. 확대하려면 이미지가 프레임에 있어야 할 때 빠른 결과와 CSS 클래스를 위해 Grow 를 사용합니다.

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 고급 이미지 위젯 하나의 패널에서 스왑을 처리합니다 이미지 호버 효과 텍스트 오버레이를 다룹니다.

관련 읽기

• 전후에 대한 Elementor 이미지 비교 슬라이더
• 이미지 위에 요소 텍스트
• Elementor 이미지 박스
• Elementor 에서 이미지 호버 효과를 추가하는 방법 (3 가지 방법)
• Elementor 에 대한 30 이미지 호버 효과