Owl 轮播 div 图片悬停的高度

Question

我正在尝试将 img 悬停在 Owl 轮播 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); }

如何更改此 'edges' 以进行过渡？请帮忙。

Answer 1

据我了解，您可以通过添加一条规则 css、

来解决此问题

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

There is example

Owl 轮播 div 图片悬停的高度

Owl Carousel div Height for image hover

html

css

twitter-bootstrap

owl-carousel-2