• 가이드

롤오버(Hover)를 활용한 이미지 전환 효과내기

롤오버(Hover) 효과란 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 도움말에서는 이미지 위젯에 롤오버 효과를 적용하는 방법을 설명합니다.

설정방법

이미지 위젯은 다음 그림처럼 두 가지 이미지를 추가할 수 있도록 설정 창 좌우로 기본 이미지롤오버 이미지 항목이 나눠져 있습니다. 사용자는 기본 이미지에 기본 표시될 이미지를 추가하고, 롤오버 이미지에 전환될 이미지를 추가할 수 있습니다.

1단계: 이미지 위젯 추가 및 설정 열기

이미지 위젯을 삽입하고, 해당 위젯의 설정을 여는 과정을 설명합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 위젯 추가를 클릭합니다.
  3. 이미지 위젯을 클릭합니다.
  4. 삽입한 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 보조 메뉴가 나오면 이미지 설정을 클릭합니다.
2단계: 기본 이미지 추가 및 효과 설정하기

기본 이미지를 추가하고 효과, 설명 등을 추가합니다.

  1. 기본 이미지를 업로드합니다.
    • 설정 창 왼쪽 그림 아이콘이 표시된 영역에 마우스 포인터를 올립니다.
    • 업로드를 클릭해 이미지를 추가합니다. 준비된 이미지가 없는 경우 무료 이미지를 클릭해 추가합니다.
  2. 효과 항목에서 옵션을 선택합니다. 각 옵션에 대한 설명은 옵션명 오른쪽 를 클릭해 확인할 수 있습니다.
  3. 음영 항목에서 이미지 위에 색상을 추가할 수 있습니다. 컬러피커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경합니다.
  4. 설명 항목에 텍스트를 입력할 수 있습니다. 입력한 텍스트는 감추거나, 이미지 아래 표시하거나, 이미지 위에 표시할 수 있습니다.
  5. 텍스트 항목에서 위 설명에 입력한 텍스트의 크기 및 색상을 변경합니다. 또한, 아이콘을 클릭해 위치를 변경할 수도 있습니다.
  6. 음영 항목에서 업로드한 이미지 위에 색상을 추가할 수 있습니다. 투명도를 조절해 지정한 색상을 반투명하게 조절할 수도 있습니다. 색상 투명도 조절방법
  7. 링크 항목에 링크를 추가하면, 이미지 클릭 시 지정한 주소로 이동합니다.
3단계: 롤오버 이미지 추가 및 효과 설정하기

롤오버 이미지를 추가하고, 효과 및 음영을 추가합니다.
주의: 기본 이미지와 적용되는 효과 및 음영이 같으면 전환 시 차이를 알아보기 어려워집니다.

  1. 롤오버 이미지를 업로드합니다.
    • 설정 창 오른쪽 그림 아이콘이 표시된 영역에 마우스 포인터를 올립니다.
    • 업로드를 클릭해 이미지를 추가합니다. 준비된 이미지가 없는 경우 무료 이미지를 클릭해 추가합니다.
  2. 효과 항목에서 옵션을 선택합니다. 각 옵션에 대한 설명은 옵션명 오른쪽 를 클릭해 확인할 수 있습니다.
  3. 설명 항목에서 텍스트 표시여부 및 감추기 여부를 선택합니다.
  4. 음영 항목에서 이미지 위에 색상을 추가할 수 있습니다. 컬러피커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경합니다. 색상 투명도 조절방법
4단계: 롤오버 효과 확인하기

롤오버 효과를 확인합니다. 롤오버 효과는 디자인 모드에서는 동작하지 않으며, 미리보기 모드 또는 게시 후 사이트에서 확인할 수 있습니다.

  1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
  2. 이미지 위에 마우스 포인터를 올립니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기를 클릭해 적용합니다.
목록으로

아임웹 디자이너가 되어주세요!

개인 디자이너, 1인 기업을 위한 아임웹 디자이너 프로그램

리셀러/디자이너 신청

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

218.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

315

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

1.9K

전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.