주요 시사점
- Elementor용 Master Addons 이미지 호버 효과 위젯에는 30개의 이미지 호버 효과가 있으며, 각 효과는 콘텐츠 탭의 호버 효과 드롭다운 하나에서 이름으로 선택됩니다.
- 마스터 애드온 프로 없이도 8 개의 이미지 호버 효과가 작동합니다: 릴리,새디, 록시,부바, 로미오,레일라, 허니 그리고 오스카. 다른 22 개의 효과는 프로가 필요합니다.
- 30개의 이미지 호버 효과 중 대부분은 제목과 설명을 보여주고, 6개는 소셜 아이콘도 보여줍니다. Honey는 하위 제목을 사용하고 Julia는 세 줄의 별도 텍스트를 보여줍니다.
- 위젯의 모든 이미지 호버 효과는 CSS로 구축되며 각 위젯에는 하나의 이미지가 있으므로 호버 카드 그리드는 여러 위젯으로 만들어집니다.
- 터치 스크린에서 이미지 호버 효과는 일반적으로 첫 번째 탭에 나타나고 두 번째 탭은 링크를 따라갑니다.
이미지 호버 효과는 포인터가 그림 위로 이동할 때 재생되는 애니메이션으로,가장 자주 제목과 설명을 표시합니다. 아래는 30 개이며 모두 에서 가져온 것입니다 이미지 호버 효과 위젯 elementor 의 경우 각각 실제 페이지에서 호버 상태로 캡처됩니다. 목록을 사용하여 표시되는 내용과 맞는 위치에 따라 효과를 선택합니다.
효과는 위젯에서 이름으로 이동하므로 아래 이름은 드롭 다운에서 볼 수 있습니다. 모든 계획의 처음 8 개 작업과 나머지는 Master Addons Pro 가 필요합니다.
목차
이러한 예제를 읽는 방법
각 예제는 포인터가 위에 있는 동안 카드를 보여줍니다. 호버링하기 전에 이미지는 일반이거나 효과에 따라 제목만 표시합니다. 각 이미지 아래의 선은 화면에 있는 내용을 말하고 사용을 제안합니다.
텍스트,색상 및 글꼴은 모두 변경 할 수 있습니다. 어떤 효과가 오버레이의 레이아웃과 어떻게 도착 수정.
Pro 없이 작동하는 8가지 효과
드롭다운의 처음 8 가지 효과는 모든 플랜에서 사용할 수 있습니다. 하위 타이틀이 있는 제목을 보여주는 Honey 를 제외하고 8 가지 모두 제목과 설명이 있습니다.
1. 릴리
제목과 설명은 약간 흐리게 표시된 이미지 위에 왼쪽 하단에 있습니다. 사진이 초점을 유지해야 하는 포트폴리오 축소판에 적합합니다.
2. 새디
제목은 중앙에 위치하며 색조가 이미지를 덮을 때 설명이 아래쪽으로 나타납니다. 짧은 태그 라인이있는 대상 타일 및 카테고리 카드에 적합합니다.
3. 록시
이미지 안에는 제목과 설명을 중심으로 얇은 프레임이 그려져 있습니다. 깔끔하고 박스형 모양이 필요한 제품이나 서비스 타일에 적합합니다.
4. 부바
프레임은 중앙 주위에 그려져 있으며 제목과 설명이 그 안에 있습니다. 각 카드에 이름과 한 줄의 세부 정보가 포함된 목록에 적합합니다.
5. 로미오
두 개의 얇은 선이 이미지를 가로지르며 중앙 위에 제목이 있고 아래에 설명이 있습니다. 사진이 강한 부동산 및 프로젝트 카드에 적합합니다.
6. 레일라
가로와 세로 선은 제목과 설명 주위에 열린 프레임을 형성합니다. 인테리어,건축 및 갤러리 그리드에 적합합니다.
7. 꿀
제목과 하위 제목은 색상 막대 위의 하단에 있는 한 줄을 공유합니다. 메뉴 범주와 짧은 레이블에 적합합니다. 하위 제목 필드를 사용하는 유일한 효과는 꿀입니다.
8. 오스카
이미지가 어두워지고 제목과 설명을 중심으로 프레임이 나타납니다. 상점 카테고리와 두 줄의 짧은 텍스트가있는 모든 카드에 적합합니다.
직접 마우스를 가져가세요. 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가지 효과를 제공합니다.
22개의 프로 효과
나머지 22 개의 효과에는 Master Addons Pro 가 필요합니다. 그 중 6 개는 소셜 아이콘을 추가하고,하나, Julia 는 세 줄의 텍스트를 보여줍니다.
9. 말리
제목은 오른쪽 위에 있고 그 아래에 선이 흐르고 설명은 오른쪽 아래에 나타납니다. 편집 레이아웃과 잡지 스타일 카드에 적합합니다.
10. 루비
제목은 묘사를 붙드는 테두리 상자 위에 체재한다. 묘사가 행동에게 외침인 특징 도와를 적응시킨다.
11. 마일로
설명은 세로선 옆 오른쪽 상단에 있고 제목은 오른쪽 하단에 있습니다. 캡션과 크레딧이 있는 이미지 카드에 적합합니다.
12. 덱스터
제목은 상단에 있고 하단의 두꺼운 프레임은 설명을 보유하고 있습니다. 대담한 홍보 타일에 적합합니다.
13. 사라
제목은 왼쪽 위에 그 아래에 줄이 있고 설명은 아래에 따릅니다. 블로그 스타일 카드와 사례 연구 티저에 적합합니다.
14. 조이
제목과 소셜 아이콘이 있는 컬러 막대가 아래쪽에서 올라오고 그 위에 설명이 표시됩니다. 팀원과 저자 카드에 적합합니다.
15. 치코
프레임 안에서 이미지가 어두워지며,제목과 설명이 중심이 됩니다. 어둡고 영화 같은 갤러리에 어울립니다.
16. 줄리아
제목은 왼쪽 상단에 있으며 그 아래에 최대 3 개의 짧은 줄이 각각 자체 레이블에 표시됩니다. 몇 가지 총알과 같은 사실이 필요한 카드에 적합합니다. Julia 는이 라인에 대한 자체 리피터를 가지고 있습니다.
17.골리앗
어두운 패널은 이미지의 아래쪽 부분을 덮고 제목과 설명을 보관합니다. 단단한 배경이 필요한 더 긴 설명이있는 카드에 적합합니다.
18. 헤라
다이아몬드 윤곽선이 제목과 네 개의 소셜 아이콘과 함께 중앙에 나타납니다. 프로필 사진과 소셜 링크 카드에 적합합니다.
19. 윈스턴
제목은 맨 위에 있고 아래에는 소셜 아이콘 행이 나타납니다. 각 사람이 소셜 프로필을 가지고 있는 팀 그리드에 적합합니다.
20. 셀레나
제목과 설명이 상단 근처에 있는 동안 이미지는 프레임 내부에서 축소됩니다. 룩북과 제품 사진에 적합합니다.
21. 테리
이미지는 어두운 배경의 작은 창으로 이동하며 왼쪽 하단에 제목과 소셜 아이콘이 있습니다. 스피커 및 직원 카드에 적합합니다.
22. 피비
제목은 바로 아래에 소셜 아이콘 행이 중앙에 있습니다. 간단한 프로필 카드에 적합합니다.
23. 아폴로
제목은 오른쪽 상단에 있고 설명은 짧은 수직선 옆 오른쪽 하단에 있습니다. 최소한의 포트폴리오 타일에 적합합니다.
24. 키라
제목은 맨 위에 조명 패널에 소셜 아이콘이 있고 그 뒤에 설명이 있습니다. 한 줄 역할로 팀원에게 적합합니다.
25. 스티브
제목과 설명은 각각 이미지 전체에 있는 자체 흰색 막대에 나타납니다. 바쁜 사진의 고대비 라벨에 적합합니다.
26. 모세
제목은 왼쪽 상단의 상자에, 설명은 오른쪽 하단의 두 번째 상자에 있습니다. 이름과 가격 등 두 부분으로 구성된 라벨에 적합합니다.
27. 재즈
제목과 묘사가 중심이 되고,모서리를 가로지르는 대각선이 있습니다. 이벤트와 음악 아트워크에 어울립니다.
28. 밍
프레임은 설명 위의 제목으로 중앙을 둘러싸고 있습니다. 상이나 인증서와 같은 공식 카드에 적합합니다.
29. 렉시
제목은 왼쪽 위에 있고,설명은 곡선 안쪽 오른쪽 아래에 있습니다. 장난기 많은 제품과 라이프스타일 타일에 어울립니다.
30. 듀크
제목은 맨 위에 있고 설명은 왼쪽 아래에있는 상자에 있습니다. 태그처럼 읽어야하는 짧은 라벨이있는 카드에 적합합니다.
하나의 테이블에 30 개의 이미지 호버 효과가 모두 있습니다
이 표에는 표시되는 텍스트 레이어와 Pro가 필요한지 여부가 포함된 모든 효과가 나열되어 있습니다.
| 효과 | 호버에 표시됩니다 | 프로가 필요하다 |
|---|---|---|
| 백합 문장 | 제목 및 설명 | 아니요 |
| 새디 | 제목 및 설명 | 아니요 |
| 록시 | 제목 및 설명 | 아니요 |
| 부바 | 제목 및 설명 | 아니요 |
| 로미오 | 제목 및 설명 | 아니요 |
| 밧줄의 일종 | 제목 및 설명 | 아니요 |
| 벌꿀 | 제목 및 하위 제목 | 아니요 |
| 오스카 오스카 | 제목 및 설명 | 아니요 |
| 말리 | 제목 및 설명 | 예 |
| 루비색의 | 제목 및 설명 | 예 |
| 노래방 하기 | 제목 및 설명 | 예 |
| 운이 좋은 | 제목 및 설명 | 예 |
| 사라 | 제목 및 설명 | 예 |
| 여자 이름 | 제목, 설명 및 소셜 아이콘 | 예 |
| 치코 | 제목 및 설명 | 예 |
| 줄리에 | 제목과 세 줄 | 예 |
| 골리앗 | 제목 및 설명 | 예 |
| 헤라 | 제목 및 소셜 아이콘 | 예 |
| 윈스턴 | 제목 및 소셜 아이콘 | 예 |
| 셀레나 | 제목 및 설명 | 예 |
| 테리 직 | 제목 및 소셜 아이콘 | 예 |
| 오점 | 제목 및 소셜 아이콘 | 예 |
| 아폴로 | 제목 및 설명 | 예 |
| 키라 | 제목, 설명 및 소셜 아이콘 | 예 |
| 스티브 | 제목 및 설명 | 예 |
| 모세 | 제목 및 설명 | 예 |
| 재즈의 | 제목 및 설명 | 예 |
| 명상 | 제목 및 설명 | 예 |
| 어미 | 제목 및 설명 | 예 |
| 공 | 제목 및 설명 | 예 |
Elementor에서 이러한 효과 중 하나를 추가하는 방법
효과를 추가하려면 위젯 하나와 드롭다운 하나가 필요합니다.
- Elementor로 페이지를 편집하고 드래그하세요 이미지 호버 효과 그것에 위젯.
- 아래 이미지를 업로드하세요 효과 및 이미지.
- 에서 이름으로 효과를 선택합니다 호버 효과.
- 채우다 제목 그리고 설명. 아이콘이 있는 효과는 소셜 링크 섹션도 표시합니다.
- 세트 링크 또는 팝업? 클릭이 어딘가로 이어져야 한다면.
격자의 경우 열당 하나의 위젯을 배치하고 행 전체에 동일한 효과를 사용합니다. Our step by step guide to elementor 에서 이미지 호버 효과 추가하기 내장 옵션도 다룹니다. 이미지에 남아 있는 캡션은 다음을 참조하세요 이미지 위에 요소 텍스트.
자주 묻는 질문
이미지 호버 효과 란 무엇입니까?
이미지 호버 효과는 방문자가 이미지 위로 포인터를 이동할 때 실행되는 애니메이션입니다. 이미지는 확대,어두워지거나 색상이 변경될 수 있으며 제목이나 설명이 그 위로 미끄러지거나 희미해지는 경우가 많습니다. 이미지 롤오버 효과 또는 이미지 오버레이라고도 합니다.
Master Addons Pro 없이 어떤 이미지 호버 효과가 작동합니까?
30 개 중 8 개: 릴리,세이디, 록시,부바, 로미오,레일라, 허니 그리고 오스카. 호버 효과 드롭다운의 처음 8 개 항목입니다. 말리에서 듀크까지 나머지 22 개에는 마스터 애드온 프로가 필요합니다.
각 이미지에 다른 호버 효과를 사용할 수 있습니까?
예. 각 이미지 호버 효과 위젯은 하나의 이미지와 하나의 효과를 보유하므로 그리드의 모든 카드는 자체 카드를 가질 수 있습니다. 깔끔한 페이지의 경우 행당 또는 섹션당 하나의 효과를 유지하십시오.
이러한 이미지 호버 효과에는 사용자 정의 CSS가 필요합니까?
아니요. 드롭다운에서 효과를 선택하면 위젯이 CSS 를 공급합니다. 색상,불투명도 및 타이포그래피는 스타일 탭에 설정되어 있습니다. CSS 를 직접 작성하는 것을 선호하는 경우 Elementor 의 Image 위젯에 몇 줄만 있으면 줌 또는 그레이스케일과 같은 간단한 효과를 생성할 수 있습니다.
팀 섹션에 가장 적합한 호버 효과는 무엇입니까?
소셜 아이콘이있는 효과는 팀 카드에 맞습니다: Zoe,Hera, Winston,Terry, Phoebe 및 Kira. Zoe 와 Kira 는 또한 설명을 보여 주며 이는 사람의 역할로 작동합니다. 여섯 개 모두 Master Addons Pro 가 필요합니다.
최종 생각
이 30 개의 이미지 호버 효과는 필요한 대부분의 레이아웃을 다룹니다: 코너 캡션,중앙 프레임,바, 패널 및 아이콘 행. 가지고있는 텍스트로 선택하십시오. 하나의 짧은 제목은 릴리 또는 오스카에게 적합하고,더 긴 설명은 골리앗에게 적합하며,소셜 링크는 Zoe 또는 Winston 을 호출합니다.
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개 계획을 모두 포함하는 계획을 나열합니다.
관련 읽기
