I'm currently using bootstrap's carousel to display items, and I've noticed that the box-shadow attribute on my item blocks is being limited by the parent element that wraps it.
https://i.sstatic.net/ks5lC.png
Is there a way for me to ensure that the shadow remains fully visible? Any assistance would be greatly appreciated! <3 Here is my code:
<div class="partner container">
<div class="partner-title">
<h5>{{ setLang("title") }}</h5>
<h2>{{ setLang("titleSecond") }}</h2>
</div>
<div
id="carouselExampleIndicators2"
class="carousel slide"
data-ride="carousel"
data-pause=false
>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="partner-logo" id="show-slide">
<div
class="logo-com"
v-for="(item, index) in partners"
:key="index"
>
<img :src="`${assetsPath}${item.url}`" alt="" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="partner-logo" id="show-slide">
<div
class="logo-com"
v-for="(partner, index) in partners"
:key="index"
>
<img :src="`${assetsPath}${partner.url}`" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
My Style:
.partner-logo {
display: flex;
justify-content: space-around;
width: 100%;
flex-wrap: wrap;
padding: 20px 0;
}
.logo-com, .logo-com img {
display: flex;
align-items: center;
}
.logo-com {
background: #fff;
box-shadow: 0 15px 94px rgb(0 56 139 / 13%);
border-radius: 20px;
height: 134px;
width: 265px;
margin-top: 23px;
justify-content: center;
}