Building a carousel in React - css

Question

I am trying to build a carousel from scratch in React. I want the active card to be in the middle and the others to show a portion of them on the side. When I put overflow hidden, it hides the portions.
How do I make it so that the side portions appear but I still maintain the background image blur?
here is my jsx code:
import React from 'react'
import './Header.css'
import {images} from '../../constants'
import Blur from 'react-blur'
const Header = () => {
return (
<Blur className="app__header" img={images.bgcake} blurRadius={35} style={{height: "100vh"}} >
<div className="app__header-carousel">
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="pink cake" src={images.carousel01} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">MORNING BERRY</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="red velvet" src={images.redVelvet} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">RED VELVET</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="pink cupcake" src={images.carousel03} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">CUP CAKES</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
</div>
</Blur>
)
}
export default Header
here is my css code:
.app__header-carousel{
display: flex;
position: absolute;
top: 10%;
right: 10%;
left: 10%;
overflow: hidden;
}
.app__header-carousel-1{
display: flex;
justify-content: space-between;
height: 80vh;
width: 100%;
margin-right: 3em;
}
.app__header-carousel-img-1{
width: 80%;
}
.app__header-carousel-content{
background: #FDFFD5;
padding: 4rem 10rem 5rem 5rem;
}
.app__header-h3{
color: #76D9D2;
margin-bottom: 0.65rem;
}
.app__header-h1{
color: #F397B0;
font-size: 4rem;
margin-bottom: 0.65rem;
}
.app__header-p{
margin-bottom: 5rem;
}
.app__explore-button{
background: #2D2D2D;
color: beige;
width: 8rem;
margin-right: 0.5rem;
padding: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.app__order-button{
background: #F397B0;
color: #2D2D2D;
width: 8rem;
margin-right: 0.5rem;
padding: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
How do I make it appear how I want it to?