<div></div>
div {
	margin: 50px auto;
	width: 200px;
	height: 200px;
	background-image: url('http://images2015.cnblogs.com/blog/608782/201609/608782-20160926101029078-1479229145.jpg');
	position: relative;
}

div:before {
	content: "";
	background-image: inherit;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	bottom: -100%;
	transform: rotateX(180deg);
}

div:after {
	content: "";
	position: absolute;
	width: 200px;
	height: 200px;
	bottom: -200px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 1)0%, rgba(255, 255, 255, 0)100%);
	z-index: 2;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.