Bootstrap 4 Image Zoom с Z-индексом - PullRequest
Новая
       17

Bootstrap 4 Image Zoom с Z-индексом

0 голосов
/ 23 октября 2018

Надеясь, что кто-то может помочь мне с моей проблемой.У меня есть небольшой ассортимент изображений, которые при наведении вверх, я бы хотел, чтобы они увеличивались в размерах.Я справился с этим, однако я не могу вывести изображение на передний план с помощью 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-индекс, изображения внезапно все свернулись и изменили размер - ширина осталась прежней, но высота уменьшилась до нескольких пикселей.

Спасибо,

Xeon.

...