Seeking help with implementing a hover effect on an img within an Owl Carousel div. I have applied a simple CSS transition to the Owl Carousel container div, but the Carousel is automatically setting a standard height. Images included for reference.
I have added a basic border color to visually represent the div height.
Displayed image before hover:
https://i.sstatic.net/x0zcl.jpg Image on hover: https://i.sstatic.net/6g5rH.jpg
My current code snippet:
<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>
My CSS style:
.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }
How can I adjust the 'edges' for a smoother transition effect? Looking for assistance, thank you.