我生成了一個簡單的 CSS 代碼,以便當用戶將鼠標懸停在圖像上時獲得放大的圖像。.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;}結果很好,但有時頂部不顯示圖像,如何防止這種情況發生?我嘗試在代碼中添加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 回答

翻過高山走不出你
TA貢獻1875條經驗 獲得超3個贊
嘗試添加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;
}
但請確保所有內容都按 z-index 組織,甚至包括下拉菜單。因為z-index行為就像等級制度。
比如說,如果添加z-index: 0;內容就會在z-index: 1;內容后面。
- 1 回答
- 0 關注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消