워드프레스에서 이미지 마우스오버 효과를 추가하는 방법 (5가지 쉬운 방법)

웹사이트에 마우스 오버 효과를 추가하는 것은 사소한 것처럼 보일 수 있지만, 사이트의 외관과 사용성을 크게 향상시킬 수 있습니다. 방문자가 이미지나 버튼 위에 마우스를 올렸을 때 해당 요소가 살짝 변하는 것을 보면, 그 요소가 상호작용 가능하다는 것을 알 수 있습니다. 

이 미묘한 움직임은 사용자 참여도를 높이고 이탈률을 줄이는 데 도움이 됩니다. 마우스 오버 효과는 특히 전자상거래에서 유용합니다. 쇼핑객이 제품을 더 자세히 미리 볼 수 있도록 하여 더 자세히 살펴보고 결제 단계로 넘어가도록 유도합니다.

워드프레스에서 이미지에 마우스 오버 효과를 추가하는 방법은 간단한 페이드 효과부터 시선을 사로잡는 플립 애니메이션까지 다양합니다. 아래에서 몇 가지 시작 방법을 확인해 보세요!

워드프레스에서 이미지 마우스오버 효과를 추가하는 방법

이 글에서는 웹사이트에 마우스 오버 효과를 추가하는 다섯 가지 간편한 방법을 소개합니다. 자신에게 가장 적합한 방법을 선택해 보세요!

방법 1: 플러그인 사용

플러그인을 사용하면 특히 동일한 사이트에서 여러 가지 마우스오버 효과를 사용하려는 경우 시간과 노력을 크게 절약할 수 있습니다.

예를 들어, 여러 개의 이미지 갤러리가 있는 경우 블로그 썸네일에는 간단한 확대/축소 효과를, 제품 이미지에는 뒤집기 효과를 적용하는 등 각 갤러리에 서로 다른 애니메이션을 적용할 수 있습니다.

Image Hover Effects Ultimate와 같은 플러그인을 사용하면 이 과정이 훨씬 쉬워집니다. 이 플러그인은 누구나 무료로 사용할 수 있으며 각 요소에 적용할 수 있는 다양한 효과를 제공합니다. 시작하려면 아래 튜토리얼을 따라 설치하기만 하면 됩니다 

플러그인 설치

• 워드프레스 관리자 영역을 여세요.
• 사이드바의 플러그인 에서 플러그인 추가를 클릭하세요

• 검색창에 "Image Hover Effects Ultimate"를 입력하세요

• 첫 번째 검색 결과를 선택하고 '지금 설치'를 다운로드를 시작하세요.
• 설치가 완료되면 활성화 버튼을 클릭하여 플러그인 사용을 시작하세요.

이미지 호버 효과 워드프레스 플러그인 사용

• 플러그인이 설치되면 대시 보드에 이미지 호버

• 메뉴를 클릭하여 플러그인 설정을 엽니다. 

• 원하는 효과를 선택하세요. 이 튜토리얼에서는 이미지 확대 효과를 .
• 효과를 선택하면 다양한 애니메이션 스타일을 볼 수 있습니다.

마음에 드는 스타일을 찾으면 '스타일 만들기'를 .

• 팝업 창이 나타납니다. 이름 필드에 제목을 입력하고 레이아웃에서 효과(1차, 2차 또는 3차)를 선택하세요. 그런 다음 저장을 계속 진행하세요.
• 높이, 너비, 투명도 등의 설정을 사용자 지정할 수 있는 새 페이지로 이동합니다. 여러 설정을 바꿔보면서 가장 보기 좋은 모습을 찾아보세요.

• 설정을 완료했으면 [편집]을 이미지를 사용자 지정하세요.

• 새로운 팝업 창이 나타납니다. 여기에서 확대 위치를 사용자 지정할 수 있습니다. 

• '이미지 선택' 눌러 이미지를 교체할 수도 있습니다 .
• 모든 설정을 완료했으면 제출을 마우스오버 효과를 저장하세요.

• 해당 효과를 사이트에 적용하려면 쇼트코드를 복사하여 게시물이나 페이지에 붙여넣으세요. 

• 이제 간단한 이미지 마우스오버 효과를 웹사이트 어디에서든 사용할 수 있습니다. 

방법 2: CSS 사용

이 방법을 사용하려면 플러그인을 설치할 필요가 없습니다. 사용자 지정 CSS를 사용하면 테마에 다양한 마우스 오버 효과를 추가할 수 있습니다.

먼저 마우스 오버 시 밑줄 효과처럼 간단한 것부터 시작해 보겠습니다. 테마에 이 효과를 추가하려면 아래의 간단한 단계를 따르세요

• 마우스오버 효과를 추가하려는 게시물로 이동하세요.
• + 메뉴에서 '표지 클릭하여 이미지를 추가하세요 .

• 표지 에 콘텐츠를 입력하세요 . 여기에 제목과 버튼을 추가하겠습니다.

• 글꼴과 스타일을 원하는 대로 설정하세요.
• 페이지를 임시 저장하세요.
• 다음으로 대시보드에서 모양

• 다음으로, [사용자 정의]를 [추가 CSS] 로 이동합니다 . 다음 코드를 추가하세요.

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• 코드를 저장하려면 '게시'를 클릭하세요

• 이제 게시글로 돌아가서 밑줄 효과를 적용할 텍스트를 선택하세요.
• 블록 사이드바의 고급 열고 추가 CSS 클래스 에 underline-hover를 .

• 페이지를 저장하고 미리보기를 통해 효과를 확인하세요. 

선택할 수 있는 마우스 오버 효과가 정말 많으니, 자신의 스타일에 가장 잘 맞는 효과를 고르세요. CSS를 직접 작성하는 법을 배우거나 워드프레스 커뮤니티에서 예제를 찾아볼 수도 있습니다. 필요한 정보는 모두 인터넷에 있으니 걱정 마세요!

방법 3: 페이지 빌더 사용 (예: Elementor)

Elementor와 같은 페이지 빌더를 사용하면 매우 창의적으로 웹사이트를 구축할 수 있습니다. 코딩 없이도 사이트를 생동감 있게 꾸밀 수 있는 다양한 마우스오버 효과가 내장되어 있습니다.

워드프레스에서 이미지에 마우스 오버 효과를 적용하는 데에도 사용할 수 있습니다. 이 섹션에서는 페이지 빌더 자체에 내장된 마우스 오버 효과를 사용해 보겠습니다.

효과를 설정하려면:

• 관리자 대시보드에서 Elementor 엽니다
• 이미지를 추가하세요.

• 이미지를 선택한 다음 스타일 탭으로 이동하세요.
• 아래로 스크롤하여 세요'를 .

• 마우스 오버 애니메이션 에서 바로 사용할 수 있는 다양한 효과를 찾을 수 있습니다.

• '성장' 선택했습니다 . 전환 지속 시간, 투명도 및 기타 설정을 사이트 디자인에 맞게 사용자 지정할 수 있습니다.

• 작업이 완료되면 미리보기를 할 필요 없이 즉시 효과를 확인할 수 있습니다. 

방법 4: 플립박스 플러그인 사용

지름길을 찾으신다면 플립박스 플러그인을 설치해 보세요. 플립박스 효과는 마우스 커서를 이미지 위로 올리면 이미지가 뒤집히면서 앞면이나 뒷면의 콘텐츠가 나타나는 효과입니다.

이 효과는 사진 이미지에 특히 유용하며, 앞면에는 사진을, 뒷면에는 카메라 정보를 표시할 수 있습니다. 하지만 활용 가능성은 무궁무진합니다.

• 플러그인 클릭한 다음, 플러그인 추가를 .
• 검색창에 "Flipbox 라고 입력하세요

• '지금 설치'를 클릭한 다음 플러그인을 활성화하세요

• 플립박스를 만들려면 플립박스 메뉴 새 플립박스 만들기를 .
• 마음에 드는 애니메이션을 선택하세요. 마음에 드는 애니메이션을 찾았으면 '스타일 만들기'를 .

• 팝업 창이 나타납니다. 원하는 레이아웃(첫 번째, 두 번째 또는 세 번째)을 선택하고 제목을 입력하세요. 

• 계속하려면 저장을 클릭하세요
• 다음으로는 효과를 설정하고 콘텐츠를 추가할 수 있는 사용자 지정 메뉴로 이동합니다.

• 미리보기 찾으세요 . 편집을 플립박스의 앞면과 뒷면 콘텐츠를 모두 사용자 지정할 수 있습니다.

• 완료되면 제출 버튼을 저장하세요.

• 이 플립박스를 페이지에 추가하려면 생성된 쇼트코드를 복사하여 사이트의 아무 곳에나 붙여넣기만 하면 됩니다. 

• 자, 이게 바로 완성품입니다! 

방법 5: 구텐베르크 블록 사용하기

구텐베르크는 워드프레스의 기본 블록 편집기로, 편집기 내에서 직접 마우스 오버 효과를 추가할 수 있습니다.

고급 호버 효과를 제공하지는 않지만, 사용자 지정 CSS를 사용하여 애니메이션을 향상시킬 수 있습니다.

예를 들어, 마우스 커서를 올렸을 때 간단한 페이드 효과를 만들어 보겠습니다. 다음은 단계별 튜토리얼입니다

• 마우스오버 효과를 추가하려는 게시물 또는 페이지로 이동하세요.
• + 버튼을 클릭하여 새 블록을 추가한 다음, 커버 블록을 선택하세요.

• 표지 블록 안에 단락 블록을 추가합니다.

• 제목과 간단한 설명을 입력하세요.
• 필요에 따라 글꼴 크기, 투명도, 정렬 및 색상을 사용자 지정하세요.

• 다음으로 커버 블록을 선택하여 사용자 지정 CSS 클래스를 추가합니다.
• 오른쪽 사이드바에서 고급 엽니다
• 추가 CSS 클래스 필드 에 fade-hover-effect를 입력하세요 .

• 그 후, 페이지를 초안으로 저장하세요.

• 플러그인 로 이동하여 WPCode를 사용합니다 .
• 새 CSS 코드 조각을 만들고 다음 코드를 붙여넣으세요

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• 코드 조각을 저장하고 활성화하세요.
• 이제 페이지를 미리 보기하여 마우스 오버 시 나타나는 페이드 효과를 확인해 보세요.

`fade-hover-effect` 클래스를 블록이나 이미지에 추가하면 이 효과를 재사용할 수 있습니다. 하지만 이미지가 많은 경우에는 WP Media Folder 미디어 라이브러리를 폴더별로 정리하는 것을 고려해 보세요. 이렇게 하면 관련 콘텐츠를 더 쉽게 찾고 재사용할 수 있습니다.

효과를 너무 많이 사용하면 성능에 영향을 미칠까요?

네, 웹사이트에 마우스 오버 효과를 너무 많이 사용하면, 특히 최적화가 제대로 되어 있지 않은 경우 성능에 영향을 미칠 수 있습니다. 일부 마우스 오버 효과는 추가적인 CSS를 필요로 하기 때문입니다. 웹사이트의 CSS 파일 크기가 누적되면 페이지 로딩 속도가 느려질 수 있습니다.

사이트를 과부하시키지 않으면서 사용자 경험을 향상시키는 데 필요한 필수적인 호버 효과만 사용하는 것이 가장 좋습니다.

마무리

워드프레스에서 이미지에 마우스 오버 효과를 추가하는 방법을 배우면 사용자 상호 작용을 향상시키고 사용자의 참여도를 높여 사이트 효과를 극대화할 수 있습니다.

플러그인, 사용자 지정 CSS 또는 페이지 빌더 등 다양한 방법으로 마우스 오버 효과를 추가할 수 있으므로, 자신에게 가장 적합한 방식을 자유롭게 선택할 수 있습니다. 다양한 스타일을 시험해보고 사이트에 가장 잘 어울리는 효과를 찾아보세요!