我生成了一個(gè)簡(jiǎn)單的 CSS 代碼，以便當(dāng)用戶將鼠標(biāo)懸停在圖像上時(shí)獲得放大的圖像。.zoom:hover { -webkit-transform:scale(1.25); /* Safari and Chrome */ -moz-transform:scale(1.25); /* Firefox */ -ms-transform:scale(1.25); /* IE 9 */ -o-transform:scale(1.25); /* Opera */ transform:scale(1.25); border: 1px solid; border-color: #999999; border-radius: 3px; box-shadow: 5px 5px #999999;}結(jié)果很好，但有時(shí)頂部不顯示圖像，如何防止這種情況發(fā)生？我嘗試在代碼中添加position: relative;和。position: absolute;css<div class="col-lg-9 d-flex flex-column justify-content-center"> <h4 style="padding-top: 25px;"><strong>Vaste filters</strong></h4> <blockquote><p class="description" style="font-size: 14px;"> Er kunnen voor modules ook vaste filers in de code worden verwerkt, om bijvoorbeeld alleen projecten te zien welke op dit moment lopen of die om een andere actie vragen. </p> <img src="img/portfolio/torza/007.png" class="img-fluid zoom" alt="Torza"> </blockquote></div><div class="col-lg-3 mt-auto mb-auto"> <img src="img/portfolio/torza/006.png" class="img-fluid zoom" alt="Torza"></div>
1 回答
翻過(guò)高山走不出你
TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊
嘗試添加z-index屬性
.zoom:hover {
transform:scale(1.25);
border: 1px solid;
border-color: #999999;
border-radius: 3px;
box-shadow: 5px 5px #999999;
/* To bring top */
position: relative;
z-index: 9999;
}
但請(qǐng)確保所有內(nèi)容都按 z-index 組織，甚至包括下拉菜單。因?yàn)閦-index行為就像等級(jí)制度。
比如說(shuō)，如果添加z-index: 0;內(nèi)容就會(huì)在z-index: 1;內(nèi)容后面。
- 1 回答
- 0 關(guān)注
- 122 瀏覽
添加回答
舉報(bào)
0/150
提交
取消