Why doesn't my gradient effect fade out at the edges of the image?

Question

I want the edges of the image to be blurry, or at least fade out blurry. Nothing I tried worked and I looked at all the questions on Stackoverflow. I'm using CSS, not Sass. To complicate the problem, I have a background image on the page and cover it with a white mask with an opacity of 0.8. Can anyone please help?

This is my Codepen.

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: inline-block;
  overflow: hidden;
  margin-top: -6px;
}

.bg {
  background-image: url('//newsinteractive.post-gazette.com/.testLaura2/shutterstock_246230623.jpg');
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  filter: blur(3px);
}

.bg-mask {
  width: 100%;
  background-color: rgba(255, 255, 255, .8);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

#ballerina {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background-image: url('http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg');
}

#ballerina:after {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 1600px;
  height: 1000px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}

<div class="bg"></div>
<div class="bg-mask"></div>

<div class="screen height-auto">
  <div id="ballerina"></div>
</div>

Answer 1

I ended up having to change my concept a little bit. I removed the background image and mask from the entire page and just set the page background to white with no mask. Then I used a solution for blurring edges using CSS for images or background images

So my code looks like this:

html：

<div class="img-contain">
    <img src="http://newsinteractive.post-gazette.com/.testLaura2/BalletAudition04xx_2992.jpg">
    <div class="block"></div>
</div>

CSS：

.img-contain {
    margin: auto;
    width: 100%;
    margin: auto;
    position: relative;
}

.img-contain img {
    width: 100%;
    height: auto;
}

.block {
    width: 100%;
    position: absolute;
    bottom: 0px;
    top: 0px;
    box-shadow: inset -0px -0px 20px 20px white;
}