溢出和变换比例不适用于背景图像

Question

.customdiv {
	height: 280px;
  overflow: hidden;
}
.customdiv:before {
	display: block;
	content: '';
	position: absolute;
	width: 100%;
	min-height: 560px;
	background-image:url('https://source.unsplash.com/rJ_ZtK96N88/1920x1080');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 0 -29em 20em 1em rgba(25, 25, 25, 0.3);
	-webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
	filter: blur(2px);
	transform: scale(1.1); 
	z-index:-1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="customdiv border">

	<div class="container text-white text-center py-4">
    
    <h1> Overflow not working</h1>
    
    <p>Scroll to the right to see</p>
    
    
  </div>
</div>
   

我正在尝试在div上显示背景图像。我正在使用2个CSS属性：模糊和变换比例。

如下所示，“ div：before”大于父div。

知道我在做什么错吗？