亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

CSS 縮放圖像始終位于頂部

CSS 縮放圖像始終位于頂部

德瑪西亞99 2023-09-11 16:19:06
我生成了一個簡單的 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;內容后面。


查看完整回答
反對 回復 2023-09-11
  • 1 回答
  • 0 關注
  • 127 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號