猫头鹰旋转木马切割div

Question

我有点问题。我使用OwlCarousel 2来制作＆＃39;推荐旋转器/滑块＆＃39;，但看起来像这样：

但我需要这样的想法 - 图像在顶部切​​割：

我打包＆＃39;盒子＆＃39;在另一个div中，但它没有解决它。
这是我的HTML：

<div>
    <div class="testimonial-box">
        <div class="testimonial-content">
            <div class="testimonial-logo">
                <img src="http://placehold.it/100x100" alt="" class="img-responsive img-thumbnail pull-left" />
            </div>
            <p>
                <!-- CONTENT -->
            </p>
            <div class="testimonial-meta">
                <p>
                    <h5>Lorem Ipsum</h5>
                    <span>, <i>Web Developer</i></span>
                </p>
                <p class="website">
                    <a href="http://vrs-factory.pl">VRS-Factory</a>
                </p>
            </div>
        </div>
    </div>
</div>

CSS [SASS]：

section.testimonials {
        padding: 30px 0;

        .testimonial-logo {
            img {
                margin-top: -88px;
            }
        }

        .testimonial-content {
            border: 1px solid rgba( $SecondColor, .2 );
            border-radius: 3px;
            padding: 20px;
        }

        .testimonial-meta {
            h5 {
                display: inline-block;
                margin-bottom: 0;
            }
        }

        .owl-carousel {
            .owl-item {
                img {
                    width: auto;
                }
            }
        }
    }

更新 这是演示：DEMO

Answer 1

这是因为overflow: hidden的{​​{1}}。

我在.owl-carousel .owl-stage-outer上添加margin-top来修复它。

.owl-item

Live example