CSS 缩放图像始终位于顶部

Question

我生成了一个简单的 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>

Answer 1

尝试添加z-index属性.zoom:hover {&nbsp; transform:scale(1.25);&nbsp; border: 1px solid;&nbsp; border-color: #999999;&nbsp; border-radius: 3px;&nbsp; box-shadow: 5px 5px #999999;&nbsp; /* To bring top */&nbsp; position: relative;&nbsp; z-index: 9999;&nbsp;}但请确保所有内容都按 z-index 组织，甚至包括下拉菜单。因为z-index行为就像等级制度。比如说，如果添加z-index: 0;内容就会在z-index: 1;内容后面。