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