html - 图像悬停的猫头鹰轮播 div 高度

Question

我正在尝试将 img 悬停在 Owl Carousel div 中。我为 Owl Carousel 容器 div 添加了简单的 CSS transition，但自动地，Owl Carousel 具有标准高度。你会在图片中看到。 我为查看 div 高度添加了简单的边框颜色。

这是悬停前的样子:

这是悬停的时候

这是我的代码:

<div class="owl-carousel owl-theme" align="center" style="border: 1px solid red;">
    <div class="item img-thumbnail grow">
        <a href="#"><img src="http://via.placeholder.com/300x250">
            <div class="text-warning" align="center">Deneme1</div>
        </a>
    </div>
    <div class="item img-thumbnail grow">
        <a href="#"><img src="http://via.placeholder.com/300x250">
            <div class="text-warning" align="center">Deneme2</div>
        </a>
    </div>

我的 CSS 代码是:

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

如何更改此“边缘”以进行过渡？ 请帮忙。

Answer 1

据我所知，你可以通过添加一个规则 css 来解决这个问题，

.owl-stage-outer {
    padding: 10px;
}

There is example