#pic {

  background-image:url("left.jpeg");

  background-size: cover;

  background-position: right;

}

​

.leftlayer-gradient {

  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */

  background: -o-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Opera 11.1 to 12.0 */

  background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */

  background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* Standard syntax (must be last) */

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  height: 100vh;

}

​

.down-image {

  width: 50px;

  vertical-align: bottom;

  border: 0;

  position: absolute;

  bottom: 0;

}