我創(chuàng)建了一個水平滾動條來顯示一組電影的海報(例如& quot今日流行& quot，& quot空前絕后& quot).目前，當(dāng)你懸停在一個圖像上時，它會創(chuàng)建一個基本的過渡縮放動畫，但我的目標(biāo)是當(dāng)你懸停時，它會在圖像上創(chuàng)建覆蓋文本，并改變背景以顯示更多關(guān)于電影的信息，如標(biāo)題，上映日期，流派等。我嘗試實(shí)現(xiàn)一個覆蓋；然而，位置情況帶來了一個問題。將覆蓋設(shè)置為絕對不允許文本匹配每張海報，而滾動并將其設(shè)置為相對(我目前將其設(shè)置為)會產(chǎn)生邊距問題。

這是我的退貨單

return(
    <div>
        <h3 className='sliderTitle'>{props.title}</h3>  
        <div className='sliderStyle'>
            {movs.map((mov) => {
                    return (
                    <div>
                        <img key={mov.original_title} className='posterStyle' src={`https://image.tmdb.org/t/p/w1280${mov.poster_path}`} alt="/"/>
                        <div className='imageOverlay'>
                            <p className='imageDescription'> Information goes Here! </p>
                        </div>
                    </div>
                    )
            })
        </div>             
    </div>
    )

這是我的CSS

.sliderStyle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: scroll;

}

.posterStyle{
    width: 250px;
    padding: 10px;
}

.posterStyle:hover {
    cursor: pointer;
    box-shadow: none;
    border-radius: 50px;
    transition: all .5s;
    transform: scale(1.1);
}


.sliderTitle {
    margin-left: 10px;
    color: #DC143C;
    font-size: 25px;
}

.imageOverlay{
    position: relative;
    background: orange;
    color: white;
}

提前感謝任何見解。這是一張當(dāng)前援助的圖片

就像我之前說的，我嘗試過將位置改為絕對位置(就像大多數(shù)教程建議的那樣)，但是絕對位置在滾動和改變屬性時不能保持文本對齊，比如“top”會丟失文本。如果你設(shè)置它為相對的，它會在底部創(chuàng)建一個空白，改變屬性如“頂部”和“底部”會把文本放在圖像的中心，但是它會在滾動條的底部創(chuàng)建一個大的間隙。