blurとbox-shadowの使い方は？

Question

私はこのフィドル持っている：私が欲しいもの

https://jsfiddle.net/npLsz70f/

.background { 
    padding: 80px; 
    position: absolute; 
    left: 0; 
    width: 40%; 
    right: 0; 
    bottom: -10px; 
    top: 0; 
    background-color: #000; 
    -webkit-filter: blur(5px); 
    -moz-filter: blur(5px); 
    -o-filter: blur(5px); 
    -ms-filter: blur(5px); 
    filter: blur(5px); 
    transform: translate3d(0px, -5px, 10px); 

} 

は、黒の背景に右側にある画像の半分に起こっている影を持つdiv要素の右側に追加することです。どのように私はそれを達成することができますどのような提案？

Answer 1

.data_protection{ 
 
\t float: left; 
 
    width: 100%; 
 
    padding: 10px 0px; 
 
    padding-bottom: 30px; 
 
    position: relative; 
 
    background-image: url(https://ec.europa.eu/clima/policies/ets/ets-summer-university/sites/clima-ets-summer-university/files/sign%20up%20photo%20-%20typing.JPG); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center; 
 
    min-height: 400px; 
 

 
} 
 

 
.background { 
 
    padding: 50px; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 40%; 
 
    right: 0; 
 
    bottom: -10px; 
 
    top: 0; 
 
    -webkit-filter: blur(5px); 
 
    -moz-filter: blur(5px); 
 
    -o-filter: blur(5px); 
 
    -ms-filter: blur(5px); 
 
    filter: blur(5px); 
 
    transform: translate3d(0px, -5px, 10px); 
 
    
 
    border: solid 1px #000; 
 
    padding-left: 1200px; 
 
    box-sizing: border-box; 
 
    box-shadow: inset -900px 0 0px 10px #000; 
 

 
}

<div class="data_protection"> 
 
\t \t \t \t \t <div class="background"> 
 

 

 
\t \t \t \t \t </div> 
 

 
\t \t \t \t </div>