이미지 호버 효과
정적 이미지가 그냥 거기에 있습니다. 이미지 호버 효과를 추가하면 동일한 그림이 일부 작업을 시작합니다: 제목이 슬라이드 인되고 설명이 페이드 업되고 클릭하면 사람들이 링크로 보내지거나 전체 팝업이 열립니다. Elementor 용 Image Hover Effects 위젯은 30 + 호버 애니메이션 (페이드,줌, 슬라이드,푸시 및 나머지) 과 함께 제공되며 CSS 라인을 작성하지 않고 설정됩니다. 하나의 이미지가 제목,캡션 및 작업을 수행해야합니다 장소에 맞습니다: 포트폴리오,팀 그리드,서비스 카드,제품 쇼케이스.
효과를 선택하고 클릭이 하는 작업을 선택하고 각 레이어를 디자인에 맞게 스타일링하세요. 결국 스크롤을 지나가는 대신 사람들이 실제로 멈추는 이미지 카드가 됩니다. 아래 비디오는 전체 내용을 살펴보고 모든 애니메이션을 보여주며 설정에는 몇 분이 걸립니다.
이미지 호버 효과란 무엇입니까?
이미지 호버 효과는 누군가가 마우스를 그림 위로 움직일 때 발화하는 애니메이션입니다. 평평하게 유지하는 대신 이미지가 반응합니다. 확대하거나 흐리게 하거나 색상을 변경하거나 텍스트 패널을 뷰로 슬라이드하여 호출하는 것도 볼 수 있습니다 이미지 롤오버 효과 또는 사진 호버 효과, 그리고 그들은 모두 같은 일을: 일반 이미지를 촬영하고 “여기에 더있다, 나를 클릭.”로 읽게
이 모든 것을 사용자 정의 CSS 로 직접 빌드할 수 있습니다. 즉,전환을 작성하고,모바일에서 동작하도록 하고,디자인이 바뀔 때마다 코드로 다시 들어가는 것입니다. Master Addons 위젯은 Elementor 내부에서 시각적으로 처리하므로 얻을 수 있습니다 간단한 이미지 호버 효과 코드 편집기를 열지 않고. 툴킷의 나머지 부분을 보려면 다음을 탐색하십시오 마스터 애드온 위젯 및 확장 또는 the Elementor 애니메이션 기능.
30+ 사전 제작 호버 애니메이션
첫인상은 호버에서 발생합니다. 제목과 설명을 부드럽게 가져오는 CSS 애니메이션 라이브러리를 얻으므로 화면에 갑자기 나타나는 대신 텍스트가 도착합니다. 한 번의 클릭으로 효과를 적용한 다음 편집기에서 이미지가 적합할 때까지 순환합니다. 넓은 풍경 사진에서 멋지게 보이는 효과가 꽉 끼는 인물 사진에서 느껴질 수 있기 때문에 일반적으로 정착하기 전에 서너 가지를 시도합니다.
- 페이드 및 확대: 텍스트가 페이드 인되는 동안 이미지가 페이드되거나 스케일 업됩니다.
- 슬라이드(위, 아래, 왼쪽, 오른쪽): 캡션 패널이 모든 가장자리에서 미끄러져 들어갑니다.
- 밀고 드러내기: 이미지가 이동하여 제목과 설명을 위한 공간을 만듭니다.
- 떠서 빛나다: 작은 리프트와 이미지를 가로지르는 빛 스윕.
- 선택할 수있는 많은: 조용한 페이드는 한쪽 끝에서, 대담한 방향 슬라이드는 다른 쪽에서.
- CSS에서 실행: 무거운 스크립트에 기대어 있지 않기 때문에 모션이 부드럽게 유지됩니다.
- 테스트 빠른: 편집기에서 효과를 교환하고 변경 사항을 즉시 확인하세요.
클릭 시 스마트 연결 및 팝업 콘텐츠
누군가가 카드를 클릭하면 어떻게 될지 결정합니다. 표준 링크가 있는 URL 을 가리키거나 작업을 팝업으로 전환하고 페이지에 사람들을 유지합니다. 팝업은 텍스트에도 국한되지 않습니다: set Content Type to 저장된 섹션 그리고 이미 구축한 Elementor 템플릿을 가져옵니다. 그러면 이미지 카드 하나가 전체 약력,제품 사양 시트 또는 문의 양식으로 연결되는 출입구로 바뀌고 방문자는 페이지를 떠나지 않습니다.
- 두 번의 클릭 작업: 링크를 통해 트래픽을 보내거나 팝업을 통해 사람들을 현장에 머물게 하세요.
- 팝업의 실제 템플릿: 일반 텍스트를 사용하거나 라이브러리에서 전체 레이아웃을 삭제하세요.
- 놀린 다음 말하세요: 이미지는 후크이고 팝업은 디테일을 전달합니다.
전체 콘텐츠 및 스타일 제어
카드가 세부 사항을 내려다 보는 방식을 제어합니다. 이미지를 업로드하고 불투명도를 설정하고 일반 상태와 호버 상태에 대해 별도로 필터링합니다. 제목 (페이지 구조에 도움이되도록 올바른 HTML 태그를 선택하십시오) 과 설명을 추가 한 다음 각 조각을 자체 색상,유형, 그림자 및 간격으로 스타일을 지정하십시오.
- 별도의 제목과 설명: 계층 구조가 명확하게 읽혀지도록 각각을 스타일링합니다.
- 이미지 필터: 호버에 회색조-색상 트릭은 여전히 좋아 보이고 여기에 하나의 설정 변경입니다.
- 카드 프레임: 배경, 테두리, 둥근 모서리, 패딩 및 상자 그림자가 레이아웃에 바로 표시됩니다.
Elementor에서 이미지 호버 효과를 추가하는 방법은 무엇입니까?
2 분 안에 작동하는 호버 카드를 가질 수 있습니다. CSS 가없고 단축 코드가 없습니다.
- 마스터 애드온을 설치하고 활성화한 다음 Elementor로 모든 페이지를 편집하세요.
- 위젯 패널을 검색하세요 이미지 호버 효과 그리고 레이아웃에 드래그하세요.
- 이미지를 업로드하고 제목과 설명을 추가하세요.
- 호버 효과 드롭 다운을 열고 30 + 애니메이션 중 하나를 선택하십시오.
- 클릭 동작을 링크 또는 팝업으로 설정하고 팝업 콘텐츠에 대해 저장된 템플릿을 선택합니다.
- 제목, 설명, 컨테이너를 스타일링한 다음 게시합니다.
당신이 게시하기 전에 할 가치가 한 가지: 전화에서 카드를 미리보기. 호버는 터치 존재하지 않습니다,그래서 탭 동작이 의미가 있는지 확인 (FAQ 에서 그 이상). 순서대로 배치 된 모든 설정에 대해,다음에 따라 이미지 호버 효과 문서.
이미지에 호버 효과를 사용하는 곳은 어디입니까?
- 팀 그리드: 호버에 이름과 역할, 다음 클릭에 팝업에 전체 약력. 여기 있습니다 팀원 섹션을 구축하는 방법.
- 포트폴리오 및 갤러리: 프로젝트 제목과 각 사진에 대한 “사례 연구 보기” 링크.
- 서비스 카드: 간단한 설명과 서비스 페이지로 연결되는 링크입니다.
- 제품 쇼케이스: 제품 이미지를 티징한 다음 팝업으로 사양을 엽니다.
- 블로그 및 카테고리 타일: 이미지 주도 탐색의 호버 캡션입니다.
텍스트와 그림을 함께 넣는 더 많은 방법을 보려면 다음을 읽어보세요 25 요소 또는 텍스트 이미지 오버 기술또는 다음과 같은 관련 이미지 위젯을 살펴보세요 이미지 핫스팟 위젯 그리고 the 엘리멘터 이미지 캐러셀.
이미지 호버 효과에 대해 자주 묻는 질문
이러한 호버 효과가 모바일 장치에서 작동합니까?
마우스가 있는 데스크톱용으로 제작되었습니다. 터치스크린에서는 일반적으로 콘텐츠를 표시하기 위해 첫 번째 탭에서 효과가 발생하고,두 번째 탭에서는 링크를 따라가거나 팝업을 엽니다. 따라서 모바일에서 두 번 탭할 계획을 세우고,한 번 표시되면 텍스트를 계속 읽을 수 있도록 하세요.
CSS를 작성하지 않고 간단한 이미지 호버 효과를 어떻게 만들 수 있습니까?
페이지에 이미지 호버 효과 위젯을 삭제하고,이미지를 업로드하고,제목과 설명을 추가하고,드롭다운에서 애니메이션을 선택합니다. 즉,CSS 가 없습니다. 위젯은 뒤에서 당신을 위해 CSS 를 작성하므로 상당히 관련된 호버 카드조차도 쉽게 조합 할 수 있습니다.
클릭 시 팝업으로 팀 약력이나 제품 세부정보를 열 수 있나요?
예. 제목에 이름을 넣고 설명에 역할을 넣고 클릭 동작을 팝업으로 설정하고 콘텐츠 유형: 저장 섹션을 선택합니다. Elementor 에서 약력을 템플릿으로 빌드하고 여기에서 선택합니다. 사진을 클릭하면 해당 전체 레이아웃이 팝업에서 열립니다.
링크와 팝업 중 어떻게 선택하나요?
방문자를 제품 페이지나 블로그 게시물 같은 다른 페이지로 이동하고 싶을 때 링크를 사용하세요. 현재 페이지를 떠나지 않고 더 많은 것을 보여주고 싶을 때 팝업을 사용하세요: 사양,짧은 약력,연락처 양식,이미지의 큰 보기.
많은 애니메이션 이미지 카드가 내 사이트 속도를 늦출까요?
효과는 CSS 에서 실행되므로 페이지에서 소수도 문제가되지 않습니다. 실제로 속도를 늦추는 것은 이미지 무게이므로 이미지를 먼저 압축하십시오. 한 페이지에 20 장 정도의 카드가 지나면 게으른 로딩을 켜고 첫 번째 페인트는 빠르게 유지됩니다.
다른 이미지에 다른 호버 효과를 사용할 수 있습니까?
설정은 한 번에 한 장의 카드를 다룹니다. 효과를 혼합하려면 각 이미지에 대해 별도의 이미지 호버 효과 위젯을 추가하고 독립적으로 설정하십시오. 그렇게하면 카드가 모두 동일한 방식으로 애니메이션되지 않는 갤러리를 얻을 수 있습니다.
일반 텍스트에 대한 팝업의 "저장된 섹션"의 이점은 무엇입니까?
저장된 섹션은 팝업 안에 전체 Elementor 편집기를 제공합니다. 일반 텍스트 대신 이미지,버튼, 열,비디오 또는 양식을 추가 할 수 있으므로 팝업은 맨 텍스트 상자가 아닌 사이트의 나머지 부분과 같습니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
