아임웹 호버 인터랙션 만들기 | 이미지에 마우스를 올리면 배경이 바뀌는 효과

 

아임웹 홈페이지를 한 단계 고급스럽게 만드는 호버 인터랙션

홈페이지를 보다 보면 단순히 이미지가 나열된 사이트와

사용자의 시선을 끌어당기는 사이트의 차이가 있습니다.

 

특히 애플(Apple) 스타일의 웹사이트를 보면 사용자가 마우스를 움직이는 것만으로도

자연스럽게 화면이 변화하며 브랜드의 분위기를 전달합니다.

 

이번에 소개하는 커스텀 코드는 이미지 위에 마우스를 올리면 배경 이미지와 텍스트가 함께 변경되는 인터랙션입니다.

실제 구현 예시

믓아 스튜디오

아임웹 홈페이지 제작 시 고급스러운 첫 화면이나 포트폴리오 소개 섹션으로 활용하기 좋은 디자인입니다.

---

이 코드로 구현되는 기능

1. 이미지 호버 시 배경 변경

카드 이미지에 마우스를 올리면 해당 이미지에 맞는 배경으로 변경됩니다.

단순한 이미지 확대 효과가 아니라 페이지 전체 분위기가 바뀌는 느낌을 연출할 수 있습니다.

 

2. 제목과 설명 자동 변경

각 카드마다 제목과 설명을 설정할 수 있습니다.

사용자가 이미지를 선택할 때마다 관련 내용이 자동으로 변경됩니다.

 

3. 활성 카드 확대

현재 선택된 이미지는 넓어지고 강조됩니다.

사용자의 시선을 자연스럽게 유도할 수 있습니다.

 

4. 애플 스타일 애니메이션

부드러운 확대 효과와 텍스트 전환 애니메이션이 적용되어 있습니다.

과하지 않으면서도 고급스러운 인터랙션을 구현할 수 있습니다.

 

5. 모바일 반응형 지원

PC에서는 가로 레이아웃으로,
모바일에서는 세로 카드 형태로 자동 변경됩니다.

---

 

사용하면 좋은 상황

이 커스텀 코드는 아래와 같은 업종에서 특히 활용도가 높습니다.

• 홈페이지 제작 업체
• 인테리어 업체
• 건축사무소
• 병원 홈페이지
• 법률사무소 홈페이지
• 호텔 및 펜션
• 브랜드 쇼핑몰
• 포트폴리오 사이트
• 제품 소개 페이지
• 기업 홈페이지

특히 브랜드 이미지를 중요하게 생각하는 사이트에서 효과가 좋습니다.

---

적용 방법

STEP 1.  아임웹에서 디자인모드 → 코드위젯 추가를 선택합니다.

STEP 2.  HTML/CSS/JS 전체 코드를 붙여넣습니다.

STEP 3.  아래 항목만 수정하면 바로 사용할 수 있습니다.

• 썸네일 이미지 URL
• 배경 이미지 URL
• 제목
• 설명 문구

---

 

전체 코드

<section class="hover-visual-section">
  <div class="hvs-bg"></div>
  <div class="hvs-overlay"></div>

  <div class="hvs-inner">
    <div class="hvs-text">
      <p class="hvs-label">PREMIUM VISUAL</p>
      <h2 id="hvsTitle">브랜드의 첫인상</h2>
      <p id="hvsDesc">첫 화면에서 브랜드의 분위기를 선명하게 전달합니다.</p>
    </div>

    <div class="hvs-images">
      <div class="hvs-card active"
        data-title="브랜드의 첫인상"
        data-desc="첫 화면에서 브랜드의 분위기를 선명하게 전달합니다."
        data-bg="https://cdn.imweb.me/upload/S202408080808649fa1484/bbbebd1b6bea4.jpg">
        <img src="https://cdn.imweb.me/upload/S202408080808649fa1484/4fdb304ab349f.jpg" alt="">
      </div>

      <div class="hvs-card"
        data-title="공간감 있는 구성"
        data-desc="넓은 여백과 부드러운 전환으로 고급스러운 인상을 만듭니다."
        data-bg="https://cdn.imweb.me/upload/S202408080808649fa1484/b0d7ed356bdbf.jpg">
        <img src="https://cdn.imweb.me/upload/S202408080808649fa1484/d9a58dd2c1501.jpg" alt="">
      </div>

      <div class="hvs-card"
        data-title="시선을 끄는 인터랙션"
        data-desc="호버만으로 배경과 텍스트가 바뀌어 몰입감을 높입니다."
        data-bg="https://cdn.imweb.me/upload/S202408080808649fa1484/c2714de43cd62.jpg">
        <img src="https://cdn.imweb.me/upload/S202408080808649fa1484/18d0e129ae39f.jpg" alt="">
      </div>
    </div>
  </div>
</section>

<style>
.hover-visual-section,
.hover-visual-section * {
  box-sizing: border-box;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}

.hover-visual-section {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.hvs-bg {
  position: absolute;
  inset: 0;
  background-image: url("https://cdn.imweb.me/upload/S202408080808649fa1484/bbbebd1b6bea4.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: background-image .45s ease, transform 1s cubic-bezier(.22,.61,.36,1);
}

.hvs-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 72% 45%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.16) 100%);
}

.hvs-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-height: 760px;
  margin: 0;
  padding: 80px 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

.hvs-text {
  width: 35%;
}

.hvs-label {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: rgba(255,255,255,.68);
}

.hvs-text h2 {
  margin: 0 0 26px;
  font-size: clamp(44px, 5.6vw, 92px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.055em;
  word-break: keep-all;
  transition: opacity .42s ease, transform .42s ease;
}

.hvs-text p {
  margin: 0;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.75;
  font-weight: 500;
  color: rgba(255,255,255,.76);
  word-break: keep-all;
  transition: opacity .42s ease, transform .42s ease;
}

.hvs-images {
  width: 60%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.hvs-card {
  position: relative;
  flex: 1;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  cursor: pointer;
  opacity: .52;
  transform: translateY(18px) scale(.97);
  transition:
    flex .7s cubic-bezier(.22,.61,.36,1),
    opacity .5s ease,
    transform .7s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 26px 70px rgba(0,0,0,.36);
}

.hvs-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  opacity: .35;
  pointer-events: none;
}

.hvs-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .55s ease;
  filter: saturate(.9) contrast(.98);
}

.hvs-card:hover,
.hvs-card.active {
  flex: 1.45;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hvs-card:hover img,
.hvs-card.active img {
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.03);
}

.hvs-card.active {
  outline: 1px solid rgba(255,255,255,.34);
}

.hvs-fade-out {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

@media (max-width: 1024px) {
  .hover-visual-section {
    min-height: auto;
  }

  .hvs-inner {
    min-height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 6vw;
    gap: 52px;
  }

  .hvs-text,
  .hvs-images {
    width: 100%;
  }

  .hvs-card {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .hvs-inner {
    padding: 72px 22px;
    gap: 42px;
  }

  .hvs-text h2 {
    font-size: 40px;
  }

  .hvs-text p {
    font-size: 16px;
  }

  .hvs-images {
    flex-direction: column;
  }

  .hvs-card,
  .hvs-card:hover,
  .hvs-card.active {
    flex: none;
    width: 100%;
    height: 180px;
    border-radius: 24px;
    transform: none;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector(".hover-visual-section");
  const bg = section.querySelector(".hvs-bg");
  const title = section.querySelector("#hvsTitle");
  const desc = section.querySelector("#hvsDesc");
  const cards = section.querySelectorAll(".hvs-card");

  cards.forEach(function (card) {
    card.addEventListener("mouseenter", function () {
      cards.forEach(function (item) {
        item.classList.remove("active");
      });

      card.classList.add("active");

      title.classList.add("hvs-fade-out");
      desc.classList.add("hvs-fade-out");

      setTimeout(function () {
        title.textContent = card.dataset.title;
        desc.textContent = card.dataset.desc;
        bg.style.backgroundImage = "url('" + card.dataset.bg + "')";
        title.classList.remove("hvs-fade-out");
        desc.classList.remove("hvs-fade-out");
      }, 200);
    });
  });
});
</script>

---

코드 수정 포인트

1. 썸네일 이미지 변경

아래 부분을 수정합니다.

<img src="이미지주소">

 

 

2. 배경 이미지 변경

data-bg="배경이미지주소"

 

 

3. 제목 변경

data-title="브랜드의 첫인상"

 

 

4. 설명 변경

data-desc="첫 화면에서 브랜드의 분위기를 선명하게 전달합니다."

 

 

5. 카드 추가하기

현재는 3개 카드로 구성되어 있습니다.

<div class="hvs-card">

영역을 복사해서 추가하면 카드 수를 늘릴 수 있습니다.

 

6. 카드 높이 조절

.hvs-card{
 height:440px;
}

숫자를 변경하면 카드 높이를 조절할 수 있습니다.

 

7. 전체 섹션 높이 조절

.hover-visual-section{
 min-height:760px;
}

원하는 높이로 변경 가능합니다.

---

자주 발생하는 오류와 해결 방법

1. 이미지가 보이지 않는 경우

대부분 이미지 URL 오류입니다.

직접 브라우저에 이미지 주소를 입력해 확인해보세요.

 

2. 호버 효과가 동작하지 않는 경우

스크립트가 삭제되었거나 중복된 경우가 많습니다.

HTML, CSS, JS가 모두 들어있는지 확인하세요.

 

3. 모바일에서 카드가 이상하게 보이는 경우

캐시 문제인 경우가 많습니다.

브라우저 새로고침 후 다시 확인해보세요.

 

4. 아임웹에서 적용이 안 되는 경우

코드위젯이 아닌 일반 텍스트 위젯에 넣은 경우입니다.

반드시 코드위젯에 삽입해야 합니다.

---

이런 분들에게 추천합니다

요즘 홈페이지는 단순히 예쁜 디자인보다 사용자의 시선을 자연스럽게 유도하는 인터랙션이 중요합니다.

특히 아임웹 기본 기능만으로는 구현하기 어려운 고급 웹디자인 효과를 커스텀 코드로 적용하면 홈페이지 완성도가 크게 올라갑니다.

브랜드의 첫인상을 강하게 만들고 싶거나 애플 스타일의 프리미엄 홈페이지를 만들고 싶다면 활용해보시기 바랍니다.

홈페이지 제작이나 아임웹 커스텀 코드 구현이 필요하다면 다양한 인터랙션 디자인도 제작 가능합니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 커버 스크롤 만들기

아임웹 커버 스크롤 만들기 | 애플 홈페이지 같은 섹션 덮기 효과 구현

 

아임웹 로딩 애니메이션 만들기

아임웹 로딩 애니메이션 만들기 | 홈페이지 오프닝 화면 구현 코드