호버에 제목과 캡션을 드러내는 이미지는 평평한 갤러리를 사람들이 만지고 싶어하는 것으로 바꿉니다. The 이미지 호버 효과 위젯 인 Elementor용 마스터 애드온 CSS 호버 애니메이션의 모든 이미지를 래핑하므로 커서가 해당 이미지에 놓이면 제목, 설명 및 링크가 슬라이드되거나 페이드되거나 확대되어 표시됩니다.
이 페이지는 설정 참조입니다. 효과와 무료 또는 Pro의 라이브 데모는 다음을 참조하세요 Elementor 이미지 호버 효과 위젯 페이지.
명명된 효과 중 하나를 선택하고 이미지를 드롭한 다음 오버레이 텍스트를 추가한 다음 색상과 필터의 스타일을 지정합니다. 사용자 정의 CSS 가 필요하지 않습니다. 이 가이드는 위젯의 모든 설정을 다룹니다.
이미지 호버 효과 위젯이 수행하는 작업 #
위젯은 하나의 이미지를 가져 와서 상단에 애니메이션 오버레이를 떨어 뜨립니다. 그 위에 마우스를 올리면 제목,설명 및 버튼이나 링크를 나타낼 수 있으며 모션은 사전 설정 효과에서 나옵니다. 30 개의 명명 된 효과가 있습니다. 8 개는 무료 (Lily,Sadie, Roxy,Bubba, Romeo,Layla, Honey 및 Oscar) 이며 22 개는 Master Addons Pro 와 함께 제공됩니다.
세 개의 탭이 실행됩니다. 콘텐츠 효과, 이미지 및 오버레이 텍스트를 보유합니다. 스타일 이미지 불투명도, 필터, 테두리, 제목 및 설명 색상을 처리합니다. 고급 일반적인 Elementor 간격 및 가시성입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 이미지와 호버링 시 표시하려는 제목 및 캡션 텍스트.
이미지 호버 효과 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 이미지 호버 효과또는 마스터 애드온 섹션으로 스크롤합니다 (위젯은 보라색 MA 배지를 가지고 있습니다). 페이지로 드래그하면 편집할 수있는 샘플 이미지와 오버레이가로드됩니다.
효과와 이미지를 선택합니다 #
열다 콘텐츠 탭. 그만큼 효과 및 이미지 섹션은 호버 애니메이션을 설정하고 그림을 로드하는 곳입니다.
- 호버 효과: 호버에 사용된 명명된 애니메이션입니다(자세한 내용은 다음 참조).
- 이미지 업로드: 미디어 라이브러리에서 이미지를 선택합니다.
- 이미지 크기 및 이미지 해상도: 작물과 결의안이 제공되었습니다.
- 링크 또는 팝업?: 전체 이미지를 링크로 만들거나 팝업을 엽니다(팝업 콘텐츠에는 Pro가 필요함).
호버 효과를 선택하세요 #
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 호버 효과 드롭다운에는 30 개의 명명된 CSS 효과가 나열됩니다. 처음 8 개는 무료이고 나머지는 Pro 로 표시됩니다. 각각은 소프트 페이드에서 슬라이드되는 캡션까지 이미지와 오버레이 텍스트를 다르게 애니메이션화합니다.
- 새디, 릴리, 레일라: 어두운 이미지 위에 제목과 캡션을 페이드합니다.
- 록시, 부바, 로미오: 텍스트와 함께 테두리나 패널을 밀어 넣습니다.
- 여보, 오스카, 말리(프로): 밑줄이나 움직이는 캡션을 공개합니다.
- 줌 및 블러 변형: 텍스트 뒤에 있는 이미지의 크기를 조정하거나 부드럽게 합니다.
이미지를 선택합니다 #
클릭 이미지 업로드 미디어 라이브러리를 열려면 그림을 선택하거나 업로드하십시오. 선택한 효과가 무엇이든 이 이미지 위에서 실행됩니다.
제목 추가 #
열다 향하고 호버에 표시되는 제목에 대한 섹션. 텍스트를 입력하고 SEO 에 대해 올바르게 읽도록 HTML 태그를 설정합니다.
- 제목: 제목 텍스트. 사이트에서 Elementor AI 를 사용하는 경우 Elementor 의 자체 Write with AI 링크도 여기에 표시됩니다.
- HTML 태그: 제목 수준, H1 ~ H6.
설명과 링크를 추가합니다 #
열다 설명 호버의 제목 아래에 표시되는 캡션을 추가하는 섹션입니다. 뒤로 효과 및 이미지, 설정하면 링크 또는 팝업? 팝업에게, the 콘텐츠 유형 그리고 콘텐츠 필드는 팝업이 무엇을 보여줄지 결정합니다. 팝업 콘텐츠는 Pro 가 필요합니다.
- 콘텐츠 유형: 팝업이 보여주는 것: 이미지, 텍스트, 저장된 섹션, 저장된 위젯 또는 저장된 페이지 템플릿(Pro).
- 내용: 전체 WYSIWYG 상자에서 편집된 팝업 텍스트입니다.
- 링크 또는 팝업?: 이미지를 URL로 가리키거나 팝업으로 엽니다.
이미지와 오버레이를 스타일링합니다 #
열다 스타일 탭. 그만큼 이미지 섹션은 호버링 전과 호버링 중에 그림이 어떻게 보이는지 제어하며, 실제로 많은 효과가 발생하는 곳입니다.
- 이미지 불투명도 및 호버 불투명도: 정지 상태와 호버링 시 이미지가 얼마나 보이는지.
- 이미지 필터 및 이미지 필터 호버링: 상태별 흐림, 밝기, 대비.
- 테두리, 테두리 반경(Pro), 상자 그림자: 이미지 주위의 프레임.
이미지 섹션 아래에서 분리하세요 제목 그리고 설명 섹션에서는 오버레이 텍스트의 색상과 타이포그래피를 처리합니다.
일반적인 사용 사례 #
- 포트폴리오 호버에서 프로젝트 이름과 링크를 공개합니다.
- 팀 그리드 각 사진에 이름과 역할을 표시합니다.
- 서비스 타일 이미지당 제목과 짧은 캡션이 있습니다.
- 블로그 썸네일 호버의 게시물 제목이 표시됩니다.
- 제품 갤러리 이미지와 이름 및 버튼을 페어링합니다.
이미지 호버 효과 위젯 작업 팁 #
- 선명한 이미지를 사용하세요. 오버레이는 그림을 어둡게하므로 바쁜 샷은 텍스트를 읽기 어렵게 만들 수 있습니다. 가운데에 방이있는 차분한 이미지가 가장 잘 작동합니다.
- 캡션을 짧게 유지하세요. 제목 아래의 한 줄은 오버레이에 빽빽이 들어찬 단락보다 더 잘 읽혀집니다.
- 효과를 내용에 맞춰. 미묘한 페이드는 포트폴리오에 적합합니다; 굵은 슬라이드는 프로모션에 적합합니다.
- 오른쪽 제목 태그를 설정합니다. 페이지의 주요 제목이 아닌 한 H1 이 아닌 갤러리 제목에 H2 또는 H3 를 사용하십시오.
- 모바일에서 테스트. 터치 시 호버링이 없으므로 누군가가 대신 탭해도 오버레이가 여전히 의미가 있는지 확인하세요.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 Image Hover Effects 요소를 처음부터 끝까지 살펴보고 Elementor 편집기에서 효과,오버레이 텍스트 및 스타일링이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
마스터 애드온의 이미지 호버 효과 위젯은 무엇입니까?
이미지에 CSS 호버 애니메이션을 추가하는 Elementor 위젯입니다. 호버에서 제목,캡션 및 선택적 링크가 표시되며 모션은 명명된 사전 설정 효과에서 나옵니다. 모든 것은 코드 없이 Elementor 패널에서 설정됩니다.
위젯에는 몇 개의 호버 효과가 포함되어 있나요?
서른. 여덟 무료 (새디,릴리, 록시,부바, 로미오,레일라, 꿀과 오스카) 와 다른 22 마스터 애드온 프로와 함께 제공. 각각은 이미지를 애니메이션과 다른 방식으로 텍스트를 오버레이.
이미지에 링크나 버튼을 추가할 수 있나요?
예. 링크 또는 팝업 옵션은 전체 이미지를 무료 버전의 링크로 만들 수 있습니다. Pro 를 사용하면 대신 팝업을 열어 이미지,텍스트 또는 저장된 Elementor 템플릿을 표시 할 수 있습니다.
호버에 제목과 캡션을 표시할 수 있나요?
예. 제목 섹션은 제목과 HTML 태그를 설정하고 설명 필드는 그 아래에 캡션을 추가합니다. 둘 다 호버 애니메이션의 일부로 나타나므로 누군가가 그 위에 마우스를 올릴 때까지 이미지가 깨끗하게 유지됩니다.
이미지 호버 효과가 모바일에서 작동하나요?
호버는 데스크톱 상호 작용이므로 터치 장치에는 진정한 호버가 없습니다. 많은 효과는 여전히 탭에서 오버레이를 표시하지만 전화에서 테스트하고 특히 이미지가 링크 인 경우 키 텍스트를 보이거나 도달 할 수 있도록 유지해야합니다.
감싸는 #
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 이미지 호버 효과 위젯 정적 이미지를 인터랙티브 이미지로 전환: 효과를 선택하고,이미지를 로드하고,제목과 캡션을 추가한 다음 불투명도,필터 및 텍스트 스타일을 지정합니다. 관련 위젯은 다음을 참조하세요 정보 상자 위젯 그리고 the 플립박스 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
