카드 애니메이션

<!-- ✅ 서비스 섹션 -->
<section class="service-grid">
    <!-- ✅ 서비스 1 -->
    <div class="service-item">
        <a class="service-box" href="#" target="_blank" style="--bg-img: url(https://cdn.imweb.me/upload/S202503179651098f2293f/89d3bc270a5cd.jpg)">
            <div>
                <h1>웹사이트 제작</h1>
                <p>고객 맞춤형 반응형 웹사이트를 제작합니다.</p>
                <div class="service-info">신뢰할 수 있는 서비스</div>
                <div class="service-tags">
                    <div class="service-label">Website</div>
                </div>
            </div>
        </a>
    </div>

    <!-- ✅ 서비스 2 -->
    <div class="service-item">
        <a class="service-box" href="#" target="_blank" style="--bg-img: url(https://cdn.imweb.me/upload/S202503179651098f2293f/ec743efb85f3c.jpg)">
            <div>
                <h1>UI/UX 디자인</h1>
                <p>사용자 경험을 고려한 감각적인 디자인을 제공합니다.</p>
                <div class="service-info">최신 트렌드 적용</div>
                <div class="service-tags">
                    <div class="service-label">Design</div>
                </div>
            </div>
        </a>
    </div>

    <!-- ✅ 서비스 3 -->
    <div class="service-item">
        <a class="service-box" href="#" target="_blank" style="--bg-img: url(https://cdn.imweb.me/upload/S202503179651098f2293f/632705c0d448e.jpg)">
            <div>
                <h1>SEO & 마케팅</h1>
                <p>검색엔진 최적화(SEO) 및 효과적인 마케팅 전략을 제공합니다.</p>
                <div class="service-info">비즈니스 성장 지원</div>
                <div class="service-tags">
                    <div class="service-label">SEO</div>
                    <div class="service-label">Marketing</div>
                </div>
            </div>
        </a>
    </div>
</section>

<!-- ✅ CSS -->
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

:root {
    --primary-color: #3c3163;
    --hover-duration: 0.5s;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Pretendard', sans-serif;
}

body {
    min-height: 100vh;
    background: #fafafa;
}

.service-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4rem;
    padding: 4rem;
    margin: 0 auto;
    width: max-content;
}

.service-box {
    --bg-filter-opacity: 0.5;
    background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
    height: 20em;
    width: 15em;
    font-size: 1.5em;
    color: white;
    border-radius: 1em;
    padding: 1em;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 5em -1em black;
    transition: all var(--hover-duration);
    position: relative;
    overflow: hidden;
    border: 10px solid #ccc;
    text-decoration: none;
}

.service-box:hover {
    transform: scale(1.05);
}

/* ✅ 메인 카피 (호버 전: 굵게, 흰색) */
.service-box h1 {
    margin: 0;
    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: bold;
    color: white;
    transition: color var(--hover-duration);
}

/* ✅ 본문 텍스트 (호버 전: 흰색) */
.service-box p {
    font-size: 0.75em;
    margin-top: 0.5em;
    line-height: 2em;
    color: white;
    transition: color var(--hover-duration);
}

/* ✅ 태그 */
.service-tags {
    display: flex;
}

.service-tags .service-label {
    font-size: 0.75em;
    background: rgba(255,255,255,0.5);
    border-radius: 0.3rem;
    padding: 0 0.5em;
    margin-right: 0.5em;
    line-height: 1.5em;
    transition: all var(--hover-duration);
    color: white;
}

/* ✅ 날짜 */
.service-info {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.75em;
    padding: 1em;
    line-height: 1em;
    opacity: .8;
    color: white;
    transition: color var(--hover-duration);
}

/* ✅ 호버 시 폰트 색상 검은색 변경 */
.service-box:hover h1,
.service-box:hover p,
.service-box:hover .service-info,
.service-box:hover .service-tags .service-label {
    color: black;
}

/* ✅ 카드 호버 시 태그 배경 색상 */
.service-box:hover .service-tags .service-label {
    background: var(--primary-color);
}

/* ✅ 호버 시 효과 */
.service-box:before, .service-box:after {
    content: '';
    transform: scale(0);
    transform-origin: top left;
    border-radius: 50%;
    position: absolute;
    left: -50%;
    top: -50%;
    z-index: -5;
    transition: all var(--hover-duration);
    transition-timing-function: ease-in-out;
}

.service-box:before {
    background: #ddd;
    width: 250%;
    height: 250%;
}

.service-box:after {
    background: white;
    width: 200%;
    height: 200%;
}

.service-box:hover {
    color: var(--primary-color);
}

.service-box:hover:before, .service-box:hover:after {
    transform: scale(1);
}

/* ✅ 미디어 쿼리 */
@media screen and (max-width: 1285px) {
    .service-grid { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 900px) {
    .service-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 500px) {
    .service-grid { padding: 4rem 2rem; }
    .service-box { max-width: calc(100vw - 4rem); }
}
</style>
![](https://velog.velcdn.com/images/lia17/post/969f48b4-8f50-4f08-8620-151bad82926f/image.gif)