CSS Увеличить изображение всегда сверху - PullRequest
0 голосов
/ 15 марта 2020

Я сгенерировал простой код 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 Ответ

1 голос
/ 16 марта 2020

Попробуйте добавить 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; контент, то он будет go позади z-index: 1; контента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...