时间戳

首页 > 解决方案 > 带 Z 索引的 Bootstrap 4 图像缩放

html - 带 Z 索引的 Bootstrap 4 图像缩放

问题描述

希望有人可以帮助我解决我的问题。我有一小部分图像，当悬停在上面时，我希望它们增加尺寸。我已经做到了，但是我似乎无法使用 Z-Index 将悬停的图像放在前面。有人可以帮帮我吗？

CSS（某人的开源项目）：

    .img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -o-transition: all .3s ease; /* IE 9 */
    -ms-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
}
.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(2); /* Safari and Chrome */
    -moz-transform:scale(2); /* Firefox */
    -ms-transform:scale(2); /* IE 9 */
    -o-transform:translatZ(0) scale(2); /* Opera */
    transform:translatZ(0) scale(2);
}

HTML：

<div class="col-md-12">
    <div class="col-md-4 img-hover"><img src="images/Seaview1.jpg" width="100%" height="100%"/></div>
    <div class="col-md-4 img-hover"><img src="images/Seaview2.jpg" width="100%" height="100%" /></div>
    <div class="col-md-4 img-hover"><img src="images/Seaview3.jpg" width="100%" height="100%"/></div>
</div>

<div class="col-md-12">
    <div class="col-md-offset-2 col-md-4 img-hover"><img src="images/Seaview4.jpg" width="100%" height="100%"/></div>
    <div class="col-md-4 img-hover"><img src="images/Seaview5.jpg" width="100%" height="100%"/></div>
</div>

<div class="col-md-12">
    <div class="col-md-4 img-hover"><img src="images/Seaview6.jpg" width="100%" height="100%"/></div>
    <div class="col-md-4 img-hover"><img src="images/Seaview7.jpg" width="100%" height="100%" /></div>
    <div class="col-md-4 img-hover"><img src="images/Seaview8.jpg" width="100%" height="100%"/></div>
</div>

同样，我在实验时遇到的另一个问题是，当我添加 Z-Index 时，图像突然全部折叠并改变大小 - 宽度保持不变，但高度折叠到几个像素。

谢谢，

至强。

标签： htmlcssbootstrap-4css-transforms

解决方案

推荐阅读