아임웹 카드 호버 인터랙션 만들기 | HTML CSS만으로 구현하는 프리미엄 카드 디자인

 

카드 하나로 홈페이지 분위기가 달라집니다

홈페이지를 보다 보면 특별한 기능은 없는데도 고급스럽게 느껴지는 사이트들이 있습니다.

대부분은 복잡한 애니메이션 때문이 아니라 작은 인터랙션 차이에서 나옵니다.

 

이번에 소개하는 코드는 마우스를 올렸을 때 카드가 부드럽게 떠오르고,

배경 색상이 반전되며, 화살표 아이콘이 등장하는 미니멀 카드 호버 인터랙션입니다.

특히 아임웹, 티스토리, 일반 홈페이지 제작 프로젝트에서 회사소개, 서비스 소개, 포트폴리오 영역에 활용하기 좋습니다.

 

실제 구현 예시

믓아 스튜디오

---

이 코드로 구현되는 기능

✔ 카드에 마우스를 올리면 자연스럽게 위로 이동

✔ 배경이 블랙으로 변경되며 고급스러운 반전 효과 적용

✔ 번호 원형 배지가 반전 애니메이션 실행

✔ 제목과 설명이 살짝 위로 이동

✔ 우측 상단 화살표 등장

✔ 모바일 반응형 자동 지원

✔ HTML/CSS만 사용하여 가볍게 동작

별도의 JS 없이도 충분히 세련된 인터랙션을 만들 수 있습니다.

---

사용하면 좋은 상황

이 코드는 아래 영역에 특히 잘 어울립니다.

홈페이지 제작

• 서비스 소개
• 제작 프로세스
• 핵심 강점 소개

아임웹 사이트

• 회사소개 섹션
• 브랜드 소개
• 포트폴리오 카드

랜딩페이지

• 장점 소개
• 기능 설명
• 상품 특징 안내

웹디자인 포트폴리오

• 프로젝트 소개
• 작업 분야 소개
• 경력 및 전문분야 소개

애플 스타일의 미니멀한 분위기를 원하는 경우 특히 잘 어울립니다.

---

적용 방법

1단계 HTML 위젯 또는 코드 위젯을 추가합니다.

2단계 아래 전체 코드를 복사해서 붙여넣습니다.

3단계 텍스트만 원하는 내용으로 수정합니다.

예시

<h3>Brand Design</h3>
<p>브랜드의 분위기를 미니멀하게 정리합니다.</p>

↓

<h3>Homepage Design</h3>
<p>전환 중심의 홈페이지를 제작합니다.</p>

이렇게 변경하면 됩니다.

---

전체 코드

<section class="minimal-hover-section">
  <div class="minimal-hover-wrap">

    <div class="mh-card">
      <span class="mh-num">01</span>
      <h3>Brand Design</h3>
      <p>브랜드의 분위기를 미니멀하게 정리합니다.</p>
      <span class="mh-arrow">↗</span>
    </div>

    <div class="mh-card">
      <span class="mh-num">02</span>
      <h3>Web Planning</h3>
      <p>방문자가 자연스럽게 문의하도록 설계합니다.</p>
      <span class="mh-arrow">↗</span>
    </div>

    <div class="mh-card">
      <span class="mh-num">03</span>
      <h3>Interaction</h3>
      <p>작은 움직임으로 완성도를 높입니다.</p>
      <span class="mh-arrow">↗</span>
    </div>

  </div>
</section>

<style>
.minimal-hover-section {
  width: 100%;
  padding: 100px 20px;
  background: #fff;
  font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

.minimal-hover-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.mh-card {
  position: relative;
  min-height: 340px;
  padding: 38px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 30px;
  background: #f8f8f8;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.45s ease;
}

.mh-card::before {
  content: "";
  position: absolute;
  inset: auto 28px 28px 28px;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}

.mh-card::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -90px;
  bottom: -90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transform: scale(0);
  transition: transform 0.55s ease;
}

.mh-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 105px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  transition: all 0.45s ease;
}

.mh-card h3 {
  margin: 0 0 18px;
  font-size: 34px;
  font-weight: 600;
}

.mh-card p {
  font-size: 18px;
  line-height: 1.75;
  color: #555;
}

.mh-arrow {
  position: absolute;
  top: 34px;
  right: 34px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.45s ease;
}

.mh-card:hover {
  transform: translateY(-12px);
  background: #111;
}

.mh-card:hover .mh-arrow {
  opacity: 1;
}
</style>

 

---

 

코드 수정 포인트

1. 카드 개수 추가하기

현재는 3개 카드입니다.

<div class="mh-card">

부분을 복사해서 원하는 만큼 추가하면 됩니다.

 

2. 카드 배경색 변경

기본

background:#111;

화이트

background:#ffffff;

브랜드 컬러 적용도 가능합니다.

 

3. 카드 높이 변경

현재

min-height:340px;

조금 더 크게

min-height:420px;

 

 

4. 둥근 정도 변경

현재

border-radius:30px;

더 둥글게

border-radius:40px;

---

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

1. 카드가 세로로만 나오는 경우

부모 영역의 가로 폭이 부족한 경우입니다.

max-width:1180px;

값을 늘려보세요.

 

2. 폰트가 다르게 보이는 경우

Pretendard 폰트가 설치되지 않았을 수 있습니다.

웹폰트를 추가하거나 기본 폰트를 사용하면 됩니다.

 

3. 모바일에서 카드가 너무 큰 경우

@media

영역에서

min-height

값을 줄이면 해결됩니다.

 

4. 호버 효과가 적용되지 않는 경우

일부 모바일 기기에서는 hover 효과가 제한됩니다.

정상적인 PC 환경에서는 문제없이 동작합니다.

---

좋은 홈페이지는 화려한 애니메이션보다 사용자가 자연스럽게 반응하는 작은 인터랙션에서 완성됩니다.

이번 카드 호버 인터랙션은 HTML/CSS만으로도 충분히 고급스러운 분위기를 만들 수 있으며,

아임웹 커스텀 코드나 홈페이지 제작 프로젝트에서도 활용도가 매우 높은 디자인입니다.

웹디자인 퀄리티를 한 단계 높이고 싶다면 이런 작은 디테일부터 적용해보시길 추천드립니다.

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 호버 인터랙션

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

 

아임웹 스크롤 진행률 표시 만들기

아임웹 스크롤 진행률 표시 만들기 | 페이지 읽기 진행바 커스텀 코드