CSS frosted glass positioned incorrectly - html

Question

I'm trying to achive frosted glass effect with CSS like here: https://codepen.io/GreggOD/full/xLbboZ
But I think, I'm missing something, because it shows me the full image, but smaller size
I have set background-size: cover; background-attachment: fixed;, yet this doesn't fix the problem
#second_wrapper {
background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 250px;
width: 500px;
}
#test_image {
background: inherit;
position: relative;
left: 50%;
top: 50%;
overflow: hidden;
height: 200px;
width: 400px;
transform: translate(-50%, -50%);
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background: inherit;
filter: blur(5px);
}
<div id='second_wrapper'>
<div id='test_image'>
<div id='blur'>
</div>
</div>
</div>

Answer 1

Is this what u wanted?
I added new css rules to #test_image:after
background: inherit;
position: relative;
left: 10%;
top: 10%;
height: 200px;
width: 400px;
/*transform: translate(-50%, -50%);*/
Note that you cannot use transform in this case , because, when you transform, the inherited background image also moves with the div.
Try uncommenting transform and change the values of translate in devtools
#second_wrapper {
background-image: url("https://images.pexels.com/photos/2466644/pexels-photo-2466644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
background-attachment: fixed;
background-size: cover;
background-position: center;
height: 250px;
width: 500px;
}
#test_image {
background: inherit;
position: relative;
left: 10%;
top: 10%;
height: 200px;
width: 400px;
/*transform: translate(-50%, -50%);*/
}
#test_image:after {
content: "";
background: inherit;
filter: blur(10px);
width: 400px;
height: 200px;
display: block;
}
<div id='second_wrapper'>
<div id='test_image'>
<div id=''>
T
</div>
</div>
</div>