Edit in JSFiddle

#box {
    position: relative;
    height: 602px;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 50%, rgba(255,255,255,1));
}

#box::before {
    content: '';
    width: 601px;
    height: 301px;
    background: -moz-element(#img) no-repeat;
    position: absolute;
    top: 301px;
    -moz-transform: matrix(1, 0, 0, -1, 0, 0);
    z-index: -1;
}
<div id="box">
    <img id="img" src="http://www.twotalkingmonkeys.com/wp-content/uploads/2010/12/gameofthrones-title-WIDE.jpg" alt="" />
</div>