CSS透明面具/淘汰赛

Question

我正在尝试在CSS中找到一个很好的方法来创建一个蒙版，其中蒙版被淘汰，我可以传递另一个图像或div。

我尝试使用的一个例子就在这里 http://jsfiddle.net/LxBM5/ 该示例中的问题是我需要能够使用渐变颜色而不是我在jsfiddle示例中使用的实体块

当你将鼠标放在图像上时，我正试图让你工作的时候，你会看到一个坚实的黑色条，当你翻过小脸时，我需要一种方法来显示另一个图像或渐变面具后面。

<div class="mask">
    <div class="image">
    </div>
</div>

.mask {
    position: relative;
    width: 500px;
    height: 300px;
    background: url(http://i.imgur.com/dyFDLPp.png) top left no-repeat;
    background-attachment: fixed;
}

.image {
    position: absolute;
    width: 100px;
    height: 400px;
    background: url(http://i.imgur.com/zbK3Ps2.png) top left no-repeat;
    background-attachment: fixed;
    display: none;
}

var mousedown = false;
$('.mask').on('mousedown mouseup', function () {
    mousedown = !mousedown
    if (mousedown) {
        $('.image').css({
            display: 'block'
        });
    } else {
        $('.image').css({
            display: 'none'
        });
    }
});
$('.mask').on('mousemove', function (e) {
    if (mousedown) {
        $('.image').css({
            top: e.clientY - 50,
            left: e.clientX - 50
        });
    }
});

Answer 1

更新您的图片？

小提琴：http://jsfiddle.net/LxBM5/3/

.mask {
    position: absolute;
    width: 50px;
    height: 400px;
    background: url(http://tinyurl.com/k8vzdo2) top left no-repeat;
    background-attachment: fixed;
    display: none;
}