ソリューションSVGを使用することをお勧めWebKitの
によってサポートされている、あなたの問題を解決します（非常に低いサポート）マスク画像
.base {
width: 600px;
height: 400px;
position: relative;
background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to left, transparent, white);
}
<div class="base"><div class="overlay"></div></div>
また、ブレンドモードを使用する別のソリューションです。これは現代のブラウザのほとんどでサポートされています。 （通常はEdgeを除いて）。私はホバー上にアニメーションを追加しました。
私はおそらくガンマ計算に関係する若干の問題があると信じています。結果が暗くなる場所があります。私はグラデーションをより明るくするように修正しようとしました。
.container {
width: 600px;
height: 400px;
position: relative;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
}
.container:hover div {
animation: slide 6s infinite;
}
.image1 {
background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
}
.image2 {
background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
mix-blend-mode: screen;
}
@keyframes slide {
from { background-position: left center, center center;
}
to {background-position: right center, center center;}
}
<div class="container">
<div class="image1">
</div>
<div class="image2">
</div>
</div>
非常にクール。ありがとう！ http://caniuse.com/#feat=css-masksによると、私がSVGを使用するように切り替えると、87％のブラウザがそれをサポートするように見えます。 IEは問題の子（やはり）であるようです。これは私のニーズにとっては十分かもしれません。少なくとも今のところは、最適ではないが十分である。特に高いモバイルサポートが与えられています。私の前で多くのテストをしているように見える... – Nicholas
私は別のposibilityを追加しました。しかし、エッジは依然として問題になります。 – vals
ありがとうございました。私はこの機能も調べました：http://caniuse.com/#search=background-blend-mode。マスクイメージよりも「完全なサポート」があるようですが、後者は必要なサポートが増えています。主な相違点は、最新のバージョンまではブレンドモードをサポートしていないAndroidであり、私はまだ3.xデバイスを使用している多くの人がいます。それで私は躊躇します。あなたの考えはどうですか？ – Nicholas