I am having an issue with using Bootstrap card and owl carousel 2. When I apply transform: scale(2.0) to the center item, it becomes vertically cropped instead of staying centered. It overflows in the owl-stage section. Is there a way to fix this problem?
Below are the snippets of my code:
HTML:
<div id="cars-news" class="owl-carousel owl-theme">
<div class="item">
<div class="card" style="width: 100%;">
<img src="{{ asset('images/lexus.jpg') }}" class="card-img-top" alt="Picture 4">
<div class="card-body">
<p class="card-title text-center">لورين ابوسو</p>
<p class="card-text text-center">لورین ابوسوم لورین ابوسوم لورین ابوسوملورین ابوسوملورین ابوسوم</p>
</div>
</div>
</div>
// More items here
</div>
CSS:
#cars-news .owl-item.active.center {
filter: blur();
transform: scale(2.0);
display: block !important;
}
// More CSS styles here
Jquery:
var owlnews = $('#cars-news').owlCarousel({
loop: true,
nav: true,
margin: 100,
dots: true,
center: true,
// More configuration options here
});
This is the current output
Here is the desired result I am aiming for