卡片鼠标悬停时，如何实现头部图片缩放且不与标题重叠

算力阿峰

2026-8-9

解决卡片头部图片缩放不与标题重叠的问题

问题描述

希望实现卡片头部图片的缩放效果，但不想让其与卡片标题产生重叠。

解决方案

问题根源是直接对.header-area元素使用transform: scale()，这会让元素视觉尺寸放大后覆盖下方标题区域。正确做法是缩放背景图片而非元素本身，元素布局空间保持不变，自然不会和标题重叠。

修改要点：

移除 hover 状态下的transform: scale(1.3)，改用background-size: 130%放大背景图
保留.header-area的固定高度，确保布局稳定

修改后的代码

HTML

<div class="single-box">
    <div class="header-area img1"></div>
    <div class="body-area">
        <h3>Banana</h3>
        <p>
            Lorem ipsum
        </p>
    </div>
</div>

CSS

main {
    width: 80%;
    height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 30px auto;
    padding: 30px 0;
}

.single-box {
    flex-direction: column;
    align-self: center;
    width: 270px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    border-radius: 10px;
    margin: 30px 0;
    overflow: hidden;
}

.header-area.img1 {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjNSVKfWJh2gqMd3ClC-pfA8MX9X34oOP8rX-psZvYcNrrZA2l1AGCP_mIG0MVZl6hj6A&usqp=CAU);
    width: 100%;
}

.header-area {
    background-size: cover;
    height: 200px;
    background-position: center center;
    border-radius: 10px 10px 50% 0;
    transition: all .3s;
}

.header-area.img1:hover {
    background-size: 130%; /* 缩放背景图而非元素 */
    transition: all .5s;
    cursor: pointer;
}

.body-area {
    padding: 10px 15px;
}