求助：实现网格卡片Hover展开时固定文本位置的解决方案

问题说明 #

我想实现网格卡片悬停展开效果，当前代码运行后，常态下卡片显示正常，但悬停时彩色区域向上扩展，导致区域内的文本跟着上移。需要让文本位置固定，同时在展开的区域中添加新内容。

现有HTML代码 #

<div className='container'>
    <div className='options-containers'>
        <div className='landingcard'>
            <div className='buttons-container color-venue'> </div>
            <img className='background-image' src={VenueBackground} alt="" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-artists'></div>
            <img src={BackgroundImage1} alt="Artists Picture" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-fans'></div>
            <img src={FansBackground} alt="" />
        </div>
    </div>
</div>

现有CSS代码 #

.landingcard{
    position: relative;
}

.landingcard img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 25px;
}


.landingcard .color-fans{
    background-color: #549FE5F2;
    opacity: 0.8;
}

.landingcard .color-venue{
    background-color: #FABF4D;
    opacity: 0.8;
}

.landingcard .color-artists{
    background-color: #FFB08B;
    opacity: 0.8;
}

.landingcard .buttons-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    display: flex;
    border-radius: 25px;

    align-items: center;
    justify-content: center;
    transition: height 0.3s, opacity 0.3s; 
}

.landingcard:hover .buttons-container {
    height: 70%; 
    opacity: 1;
}

解决步骤 #

• 拆分文本与背景容器：把原本放在buttons-container里的文本单独抽成一个子元素，让它独立于背景的高度变化
• 固定文本位置：通过绝对定位让文本始终贴在卡片底部，不受背景容器高度影响
• 保留背景扩展动画：维持buttons-container的高度过渡效果，同时在里面添加可展开的新内容

修改后的HTML结构 #

给每个buttons-container添加固定文本容器和扩展内容容器：

<div className='container'>
    <div className='options-containers'>
        <div className='landingcard'>
            <div className='buttons-container color-venue'>
                <div class="fixed-text">场地</div>
                <div class="expand-content">
                    <button>查看详情</button>
                    <p>专属场地预订服务</p>
                </div>
            </div>
            <img className='background-image' src={VenueBackground} alt="" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-artists'>
                <div class="fixed-text">艺人</div>
                <div class="expand-content">
                    <button>入驻申请</button>
                    <p>打造个人专属主页</p>
                </div>
            </div>
            <img src={BackgroundImage1} alt="Artists Picture" />
        </div>
        <div className='landingcard'>
            <div className='buttons-container color-fans'>
                <div class="fixed-text">粉丝</div>
                <div class="expand-content">
                    <button>加入社区</button>
                    <p>获取最新演出资讯</p>
                </div>
            </div>
            <img src={FansBackground} alt="" />
        </div>
    </div>
</div>

修改后的CSS样式 #

.landingcard{
    position: relative;
}

.landingcard img {
    width: 100%;
    height: 100%; 
    object-fit: cover; 
    border-radius: 25px;
}

.landingcard .color-fans{
    background-color: #549FE5F2;
    opacity: 0.8;
}

.landingcard .color-venue{
    background-color: #FABF4D;
    opacity: 0.8;
}

.landingcard .color-artists{
    background-color: #FFB08B;
    opacity: 0.8;
}

.landingcard .buttons-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 15%;
    border-radius: 25px;
    transition: height 0.3s, opacity 0.3s; 
}

.landingcard:hover .buttons-container {
    height: 70%; 
    opacity: 1;
}

/* 固定文本样式 */
.fixed-text {
    position: absolute;
    bottom: 1rem; /* 调整文本与底部的间距 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #fff;
    font-weight: bold;
}

/* 扩展内容样式 */
.expand-content {
    position: absolute;
    top: 2rem; /* 调整扩展内容与顶部的间距 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.landingcard:hover .expand-content {
    opacity: 1;
}

.expand-content button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.9);
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.expand-content p {
    color: #fff;
    margin: 0;
}

内容的提问来源于stack exchange，提问作者JaytheInj