CSS: Fade off the bottom of an image

Fade-off-the-bottom-of-an-image.markdown

Fade off the bottom of an image

This looks like a good way to limit the height of a dynamic image (perhaps user submitted).

A Pen by Trippnology on CodePen.

License.

index.html

<div class="item">
      <div class="img-wrap">
            <img src="http://i.imgur.com/crOw6MT.jpg">
      </div>
</div>

style.css

body { background: #EFEFEF; }
.item {
  margin: 0 auto;
  padding: 1em;
  position: relative;
  max-width: 320px;
  height: 400px;
  overflow: hidden;
}
.item .img-wrap:before {
  content: '';
  background-image: linear-gradient(to top, rgba(239,239,239,255), rgba(239,239,239,0));
  position: absolute;
  height: 100px;
  right: 0;
  bottom: 0;
  left: 0;
}
.item .img-wrap:after {
  content: '';
  display: block;
  height: 9999px;
}
.img-wrap img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
  -ms-interpolation-mode: bicubic;
}