Elementor 이미지 호버 효과: 이미지용 호버 애니메이션 30개
정적 이미지가 그냥 거기에 있습니다. 이미지 호버 효과를 추가하면 동일한 그림이 일부 작업을 시작합니다: 제목이 슬라이드 인되고 설명이 페이드 업되고 클릭하면 사람들이 링크로 보내지거나 전체 팝업이 열립니다. Elementor 용 Image Hover Effects 위젯은 30 개의 호버 애니메이션 (무료 플러그인에서는 8 개,Pro 에서는 22 개 이상) 과 함께 제공되며 CSS 라인을 작성하지 않고 설정했습니다. 하나의 이미지가 제목,캡션 및 작업을 수행해야합니다 장소에 맞습니다: 포트폴리오,팀 그리드,서비스 카드,제품 쇼케이스.
효과를 선택하고 클릭이 하는 작업을 선택하고 각 레이어를 디자인에 맞게 스타일링하세요. 결국 스크롤을 지나가는 대신 사람들이 실제로 멈추는 이미지 카드가 됩니다. 아래 비디오는 전체 내용을 살펴보고 모든 애니메이션을 보여주며 설정에는 몇 분이 걸립니다.
이미지 호버 효과란 무엇입니까?
이미지 호버 효과는 누군가가 사진 위로 마우스를 이동할 때 발생하는 애니메이션입니다. 평평하게 유지하는 대신 이미지가 반응합니다. 텍스트 패널을 확대/축소, 흐리게, 색상 변경 또는 보기로 밀어넣을 수 있습니다. 가장 일반적인 종류는 이미지 오버레이로 제목과 설명이 이미지 위에 텍스트로 표시됩니다. 당신은 또한 그들을 볼 것입니다 이미지 롤오버 효과 또는 사진 호버 효과, 그리고 그들은 모두 같은 일을: 일반 이미지를 촬영하고 “여기에 더있다, 나를 클릭.”로 읽게
이 모든 것을 사용자 정의 CSS 로 직접 빌드할 수 있습니다. 즉,전환을 작성하고,모바일에서 동작하도록 하고,디자인이 바뀔 때마다 코드로 다시 들어가는 것입니다. Master Addons 위젯은 Elementor 내부에서 시각적으로 처리하므로 얻을 수 있습니다 간단한 이미지 호버 효과 코드 편집기를 열지 않고. 툴킷의 나머지 부분을 보려면 다음을 탐색하십시오 마스터 애드온 위젯 및 확장 또는 the Elementor 애니메이션 기능.
30 호버 애니메이션, 그 중 8 무료
첫인상은 호버에서 발생합니다. 제목과 설명을 부드럽게 가져오는 CSS 애니메이션 라이브러리를 얻으므로 화면에 갑자기 나타나는 대신 텍스트가 도착합니다. 한 번의 클릭으로 효과를 적용한 다음 편집기에서 이미지가 적합할 때까지 순환합니다. 넓은 풍경 사진에서 멋지게 보이는 효과가 꽉 끼는 인물 사진에서 느껴질 수 있기 때문에 일반적으로 정착하기 전에 서너 가지를 시도합니다.
- 페이드 및 확대: 텍스트가 페이드 인되는 동안 이미지가 페이드되거나 스케일 업됩니다.
- 슬라이드(위, 아래, 왼쪽, 오른쪽): 캡션 패널이 모든 가장자리에서 미끄러져 들어갑니다.
- 밀고 드러내기: 이미지가 이동하여 제목과 설명을 위한 공간을 만듭니다.
- 떠서 빛나다: 작은 리프트와 이미지를 가로지르는 빛 스윕.
- 8 가지 효과는 무료입니다: 릴리,새디, 록시,부바, 로미오,레일라, 허니 그리고 오스카. 프로는 말리에서 듀크까지 22 가지를 더 추가합니다.
- CSS에서 실행: 무거운 스크립트에 기대어 있지 않기 때문에 모션이 부드럽게 유지됩니다.
- 테스트 빠른: 편집기에서 효과를 교환하고 변경 사항을 즉시 확인하세요.
이미지 호버 효과 예
각 카드 위로 포인터를 이동하거나 전화기에서 탭하여 효과를 확인합니다. 이 8가지는 Pro 없이 작동하는 효과이며 모든 카드는 라이브 이미지 호버 효과 위젯입니다.
엘라 & 샘
서머셋 · 6월
백합 문장
그리스
11일
새디
소극
유산소 운동과 기계
록시
...에 유령
12,400마일
부바
클리프 하우스
4베드 · EPC B
로미오
갤러리 벽
브리스톨 · 2025
밧줄의 일종
스타터 아홉가지 요리
벌꿀
겉옷
87개
오스카 오스카
30 이미지 호버 효과 모두
호버 효과 드롭다운에는 이름별로 30개의 효과가 나열됩니다. 모든 사람은 이미지 위에 제목과 설명에 애니메이션을 적용하고 오버레이, 텍스트 및 이미지가 움직이는 방식이 다릅니다.
| 효과 | 프로가 필요하다 | 효과 | 프로가 필요하다 |
|---|---|---|---|
| 백합 문장 | 아니요 | 줄리에 | 예 |
| 새디 | 아니요 | 골리앗 | 예 |
| 록시 | 아니요 | 헤라 | 예 |
| 부바 | 아니요 | 윈스턴 | 예 |
| 로미오 | 아니요 | 셀레나 | 예 |
| 밧줄의 일종 | 아니요 | 테리 직 | 예 |
| 벌꿀 | 아니요 | 오점 | 예 |
| 오스카 오스카 | 아니요 | 아폴로 | 예 |
| 말리 | 예 | 키라 | 예 |
| 루비색의 | 예 | 스티브 | 예 |
| 노래방 하기 | 예 | 모세 | 예 |
| 운이 좋은 | 예 | 재즈의 | 예 |
| 사라 | 예 | 명상 | 예 |
| 여자 이름 | 예 | 어미 | 예 |
| 치코 | 예 | 공 | 예 |
클릭 시 스마트 연결 및 팝업 콘텐츠
누군가가 카드를 클릭하면 어떻게 될지 결정합니다. 표준 링크가 있는 URL 을 가리키거나,Pro 를 사용하여 작업을 팝업으로 전환하고 사람들이 페이지에 계속 있도록 합니다. 팝업은 텍스트에도 국한되지 않습니다: 콘텐츠 유형을 로 설정합니다 저장된 섹션 그리고 이미 구축한 Elementor 템플릿을 가져옵니다. 그러면 이미지 카드 하나가 전체 약력,제품 사양 시트 또는 문의 양식으로 연결되는 출입구로 바뀌고 방문자는 페이지를 떠나지 않습니다.
- 두 번의 클릭 작업: 링크를 통해 트래픽을 보내거나 팝업으로 사람들을 현장에 유지하세요(Pro).
- 팝업의 실제 템플릿(Pro): 라이브러리에서 이미지, 텍스트 또는 전체 레이아웃을 표시합니다.
- 놀린 다음 말하세요: 이미지는 후크이고 팝업은 디테일을 전달합니다.
이미지 위에 텍스트: 제목, 설명 및 오버레이 스타일링
카드가 세부 사항을 내려다 보는 방식을 제어합니다. 이미지를 업로드하고 불투명도를 설정하고 일반 상태와 호버 상태에 대해 별도로 필터링합니다. 제목 (페이지 구조에 도움이되도록 올바른 HTML 태그를 선택하십시오) 과 설명을 추가 한 다음 각 조각을 자체 색상,유형, 그림자 및 간격으로 스타일을 지정하십시오.
- 별도의 제목과 설명: 계층 구조가 명확하게 읽혀지도록 각각을 스타일링합니다.
- 이미지 필터: 호버에 회색조-색상 트릭은 여전히 좋아 보이고 여기에 하나의 설정 변경입니다.
- 카드 프레임: 배경, 테두리, 상자 그림자, 둥근 모서리, Pro 패딩 등이 레이아웃에 딱 맞습니다.
Elementor 호버 옵션 대 이미지 호버 효과 위젯
Elementor의 이미지 위젯에는 스타일 탭에 호버 설정이 있습니다: 불투명도, CSS 필터 및 성장 또는 펄스와 같은 호버 애니메이션. 그들은 그림 자체를 바꿉니다. 이 위젯이 채우는 간격인 이미지 위에 텍스트를 넣을 수 없습니다.
| Elementor 이미지 위젯 | 이미지 호버 효과 위젯 | |
|---|---|---|
| 호버시 불투명 | 예 | 예 |
| 호버시 CSS 필터 | 예 | 예 |
| 호버 애니메이션 | 전체 이미지를 이동하는 사전 설정 | 오버레이, 제목 및 설명을 애니메이션으로 만드는 30가지 효과 |
| 이미지 위에 텍스트 | ...이 아닌 . 캡션은 이미지 아래에 있습니다. | 이미지의 제목과 설명 |
| 호버에 나타나는 텍스트 | 아니요 | 예 |
| 클릭 동작 | 링크 또는 라이트박스 | 링크 또는 Pro와 함께하는 팝업 |
| 호버시 두 번째 이미지로 바꾸기 | 아니요 | ...이 아닌 사용 고급 이미지 그것을 위해. |
이미지 호버 효과를 한 눈에 볼 수 있습니다.
위젯에 대한 주요 사실은 하나의 테이블에서.
| 특징 | 이미지 호버 효과 |
|---|---|
| 호버 효과 | 30. 그 중 22명은 프로가 필요합니다. |
| 이미지의 텍스트 | 제목 및 설명, 제목에 대한 H1에서 H6까지의 HTML 태그 포함 |
| 클릭 동작 | 없음, 링크 또는 팝업(Pro) |
| 팝업 콘텐츠(Pro) | 텍스트, 이미지 또는 저장된 섹션, 위젯 또는 페이지 템플릿 |
| 이미지 설정 | 일반 및 호버용으로 별도로 설정된 불투명도 및 필터 |
| 호버의 두 번째 이미지 | 아니요 |
| 터치 스크린 | 첫 번째 탭은 텍스트를 보여줍니다. 두 번째 탭은 링크를 따릅니다. |
| 필요 | Elementor 및 마스터 애드온 |
Elementor에서 이미지 호버 효과를 추가하는 방법은 무엇입니까?
2 분 안에 작동하는 호버 카드를 가질 수 있습니다. CSS 가없고 단축 코드가 없습니다.
- 마스터 애드온을 설치하고 활성화한 다음 Elementor로 모든 페이지를 편집하세요.
- 위젯 패널을 검색하세요 이미지 호버 효과 그리고 레이아웃에 드래그하세요.
- 이미지를 업로드하고 제목과 설명을 추가하세요.
- 호버 효과 드롭 다운을 열고 애니메이션을 선택하십시오. 8 개는 무료이며 22 개는 Pro 와 함께 제공됩니다.
- 클릭 동작을 링크로 설정하거나 Pro가 있는 경우 저장된 템플릿이 있는 팝업으로 설정합니다.
- 제목, 설명, 컨테이너를 스타일링한 다음 게시합니다.
당신이 게시하기 전에 할 가치가 한 가지: 전화에서 카드를 미리보기. 호버는 터치 존재하지 않습니다,그래서 탭 동작이 의미가 있는지 확인 (FAQ 에서 그 이상). 순서대로 배치 된 모든 설정에 대해,다음에 따라 이미지 호버 효과 문서.
이미지에 호버 효과를 사용하는 곳은 어디입니까?
- 팀 그리드: 호버에 이름과 역할, 다음 클릭에 팝업에 전체 약력. 여기 있습니다 팀원 섹션을 구축하는 방법.
- 포트폴리오 및 갤러리: 프로젝트 제목과 각 사진에 대한 “사례 연구 보기” 링크.
- 서비스 카드: 간단한 설명과 서비스 페이지로 연결되는 링크입니다.
- 제품 쇼케이스: 제품 이미지를 티징한 다음 팝업으로 사양을 엽니다.
- 블로그 및 카테고리 타일: 이미지 주도 탐색의 호버 캡션입니다.
텍스트와 그림을 함께 넣는 더 많은 방법을 보려면 다음을 읽어보세요 25 요소 또는 텍스트 이미지 오버 기술. 관련 이미지 위젯에는 다음이 포함됩니다 이미지 회전목마, 그만큼 필터링 가능한 이미지 갤러리, 그만큼 이미지 핫스팟 위젯과 고급 이미지 위젯.
이미지 호버 효과에 대해 자주 묻는 질문
이러한 호버 효과가 모바일 장치에서 작동합니까?
마우스가 있는 데스크톱용으로 제작되었습니다. 터치스크린에서는 일반적으로 콘텐츠를 표시하기 위해 첫 번째 탭에서 효과가 발생하고,두 번째 탭에서는 링크를 따라가거나 팝업을 엽니다. 따라서 모바일에서 두 번 탭할 계획을 세우고,한 번 표시되면 텍스트를 계속 읽을 수 있도록 하세요.
CSS를 작성하지 않고 간단한 이미지 호버 효과를 어떻게 만들 수 있습니까?
페이지에 이미지 호버 효과 위젯을 삭제하고,이미지를 업로드하고,제목과 설명을 추가하고,드롭다운에서 애니메이션을 선택합니다. 즉,CSS 가 없습니다. 위젯은 뒤에서 당신을 위해 CSS 를 작성하므로 상당히 관련된 호버 카드조차도 쉽게 조합 할 수 있습니다.
클릭 시 팝업으로 팀 약력이나 제품 세부정보를 열 수 있나요?
예,Pro 와 함께. 제목에 이름을 넣고 설명에 역할을 넣고 클릭 동작을 팝업으로 설정하고 콘텐츠 유형: 저장된 섹션을 선택합니다. Elementor 에서 약력을 템플릿으로 빌드하고 여기에서 선택하십시오. 사진을 클릭하면 해당 전체 레이아웃이 팝업에서 열립니다.
30 개의 이미지 호버 효과는 모두 무료인가요?
8 가지 효과는 무료입니다: Lily,Sadie, Roxy,Bubba, Romeo,Layla, Honey 및 Oscar. 나머지 22 개는 Master Addons Pro 와 함께 팝업 콘텐츠,둥근 모서리 및 패딩 컨트롤과 함께 제공됩니다. 제목,설명, 링크 및 이미지 필터는 모두 무료 버전에서 작동합니다.
누군가가 Elementor에서 이미지 위로 마우스를 가져갔을 때 텍스트를 어떻게 표시합니까?
이미지 호버 효과 위젯을 추가하고, 이미지를 업로드하고, 제목과 설명을 입력하고, 호버 효과를 선택합니다. 포인터가 이미지 위에 올 때까지 텍스트가 숨겨진 상태로 유지되고 애니메이션이 적용됩니다. Elementor의 이미지 위젯에는 이미지 위에 텍스트가 설정되어 있지 않습니다.
많은 애니메이션 이미지 카드가 내 사이트 속도를 늦출까요?
효과는 CSS 에서 실행되므로 페이지에서 소수도 문제가되지 않습니다. 실제로 속도를 늦추는 것은 이미지 무게이므로 이미지를 먼저 압축하십시오. 한 페이지에 20 장 정도의 카드가 지나면 게으른 로딩을 켜고 첫 번째 페인트는 빠르게 유지됩니다.
다른 이미지에 다른 호버 효과를 사용할 수 있습니까?
설정은 한 번에 한 장의 카드를 다룹니다. 효과를 혼합하려면 각 이미지에 대해 별도의 이미지 호버 효과 위젯을 추가하고 독립적으로 설정하십시오. 그렇게하면 카드가 모두 동일한 방식으로 애니메이션되지 않는 갤러리를 얻을 수 있습니다.
일반 텍스트에 대한 팝업의 "저장된 섹션"의 이점은 무엇입니까?
저장된 섹션은 Pro 옵션이며 팝업 내부의 전체 Elementor 편집기를 제공합니다. 일반 텍스트 대신 이미지,버튼, 열,비디오 또는 양식을 추가 할 수 있으므로 팝업은 맨 텍스트 상자가 아닌 사이트의 나머지 부분과 같습니다.
Elementor에서 마우스를 가져가면 이미지를 확대하려면 어떻게 합니까?
일반 줌의 경우 Elementor의 이미지 위젯을 선택하고 스타일 탭을 열고 호버 애니메이션을 성장으로 설정합니다. 이미지 호버 효과 위젯에서 제목과 설명이 들어 있는 동안 여러 효과가 이미지를 조정합니다.
호버에서 이미지를 변경할 수 있습니까?
이 위젯이 아닙니다. 하나의 이미지를 유지하고 그 위에 오버레이와 텍스트를 애니메이션합니다. 호버에서 두 번째 이미지로 바꾸려면 고급 이미지 위젯을 선택하고 디스플레이 호버 이미지를 켭니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
