[HTML/CSS] :has()와 :not(:hover)를 활용한 고급 호버 효과

 

① HTML

<h1>추천 컨텐츠</h1>
    <div class="wrapper">
        <div class="card">
            <a href="#card1">
              <div class="card-image">
                  <img src="https://images.unsplash.com/photo-1506260408121-e353d10b87c7?q=80&w=1000" alt="이미지 1">
              </div>
              <div class="card-content">
                  <h2 class="card-title">자연의 신비</h2>
                  <p class="card-description">눈부신 풍경과 자연이 만들어낸 경이로운 모습들을 담았습니다.</p>
              </div>
            </a>
        </div>
        <div class="card">
            <a href="#card2">
            <div class="card-image">
                <img src="https://images.unsplash.com/photo-1519501025264-65ba15a82390?q=80&w=1000" alt="이미지 2">
            </div>
            <div class="card-content">
                <h2 class="card-title">도시의 밤</h2>
                <p class="card-description">불빛으로 가득한 도시의 야경을 담은 컬렉션입니다.</p>
            </div>
              </a>
        </div>
        <div class="card">
            <a href="#card3">
              <div class="card-image">
                  <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=1000" alt="이미지 3">
              </div>
              <div class="card-content">
                  <h2 class="card-title">미니멀 라이프</h2>
                  <p class="card-description">단순함이 주는 아름다움과 여유로운 라이프스타일.</p>
              </div>
            </a>
        </div>
    </div>

 

② CSS

* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f5f7fa; color: #333; line-height: 1.6; padding: 2rem; }
h1 { text-align: center; margin-bottom: 2rem; color: #2d3748; }
.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
.card { background-color: white; border-radius: 10px; overflow: hidden; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.card-image { height: 200px; overflow: hidden; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card-content { padding: 1.5rem; }
.card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; color: #1a202c; }
.card-description { font-size: 0.9rem; color: #4a5568; margin-bottom: 1rem; }
.card-price { font-weight: 700; color: #3182ce; font-size: 1.2rem; margin-bottom: 1rem; }
.card-button { display: inline-block; background-color: #4299e1; color: white; padding: 0.5rem 1rem; border-radius: 5px; text-decoration: none; font-weight: 500; transition: background-color 0.3s ease; }
.card-button:hover { background-color: #3182ce; }
.card:hover { z-index: 1; }
.card:hover .card-image img { transform: scale(1.1); }
.wrapper:has(.card:hover) .card:not(:hover) { filter: blur(3px); opacity: 0.6; }

 

 

③ Codepen

See the Pen [HTML/CSS] :not(:hover)를 사용해보기 by TytanLee (@TytanLee) on CodePen.

• hover 컨텐츠(이하 카드)의 부모에 `:has(카드:hover) .카드:not(:hover)`를 적용하면 카드에서 호버 된 카드를 제외하고는 지정한 css가 적용된다.
• ui/ux관점에서 블러까지는 과한 것 같지만 나중에 혹시 써먹을지 몰라 아카이빙.