Is it possible to leave part of image transparent with css?

Question

It is possible to make a photo gradient to transparent at the bottom of an image using css only ?

Example:

Answer 1

To do something similar using a mix of Filters and Blend Modes, however the end of the image will never be 100% transparent.

Here is an example of the applied technique, which needs adjustments to stay within your "acceptance standard"... (image treated and original next to).

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
body {
    background-image: url(http://placecage.com/11/11);
}
* {
    float: left;
}
.cont {
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 1;
}
.cont .branco {
  background-image: linear-gradient(to top, rgba(255,255,255,1) 40%,rgba(255,255,255,0) 100%);
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 0;
}
.cont .mix {
    position: absolute;
    z-index: 1;
    filter: opacity(40%);
    mix-blend-mode: multiply;
}
.cont .normalizer {
    mix-blend-mode: normal;
}
.cont .filtros {
    position: absolute;
    z-index: 1;
    filter: contrast(120%) brightness(110%) opacity(50%);
    mix-blend-mode: multiply;
}

<div class="cont">
    <img class="mix"src="http://placecage.com/300/300" alt="">
    <img class="mix normalizer"src="http://placecage.com/300/300" alt="">
    <img class="filtros"src="http://placecage.com/300/300" alt="">
    <div class="branco"></div>
</div>

<img src="http://placecage.com/300/300" alt="">

A solution is using two backgrounds in a div, but only works with solid colors. Vc will simulate a shading on the image that should have the same color as the background. In the example I used black.

See the result.

html, body {
  background-color: #000;
}
.holder {
  background-image: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%), url(http://placecage.com/300/300);
  width: 300px;
  height: 300px;
}

<div class="holder"></div>

Already to make this "fade" really transparent, I think by CSS is not yet possible.

OBS1: Consider using a .PNG, it’s easy to do this in qq image editor! Because not everything is worth doing with CSS, this mix of filtros with blends makes the page lose performance and is accelerated by hardware...

OBS2: Browsers Techniques and Assumption. Filter is not accepted by IE https://caniuse.com/#feat=css-Filters and the Mix-Blend-Mode is accepted neither by IE nor by Edge https://caniuse.com/#feat=css-backgroundblendmode