Adding blur changes div below-CodePudding

If I blur a div, the div below is changed, similarly to a linear gradient (screenshot below). Why does this happen and how could I solve it? (I would like to have a clear cut between the two divs).

This is my code for the upper div:

.hero-banner-fourteen::before{
  background-image: url("../images/moje_slike/video7.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  margin: -20px;
}

.hero-banner-fourteen {
  position: relative;
  padding: 200px 0 130px;
  z-index: 2;
  height: 100vh;
}

.hero-banner-fourteen::before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);               //IF I ADD FILTER LOWER DIV CHANGES 
}

The html file:

      <div className="hero-banner-fourteen lg-container" id="home">
        <div className="container">
          <HeroBanner />
          <div className="screen-holder">
            <svg src="images/shape/241.svg" alt="" className="img-meta" />
          </div>
        </div>
      </div>
      <div
        className="fancy-feature-thirtySix lg-container pt-170 pb-110 md-pt-120 md-pb-60"
        id="product"
      >
        <div className="container position-relative">
          <div className="row">
            <div
              className="col-xl-3 col-lg-4"
              data-aos="fade-right"
              data-aos-duration="1200"
            >
              <div className="title-style-eleven md-mb-40 text-center text-lg-left">
                <h2 className="text-white">Our latest Arrival.</h2>
              </div>
            </div>
            <div className="col-xl-9 col-lg-8">
              <div className="product_slider_one vr-landing-slider">
                <LatestProduct />
              </div>
            </div>
          </div>
        </div>
      </div>

CodePudding user response：

From your image it seems that blurring an element goes beyond it's boundary box. As suggested in the comments, you can workaround that by including the div inside another div that has overflow:hidden.