Question

我正在寻找一种方法将两张图片并排放在具有以下属性的网页上 1）看起来应该是这样的 2）两者都必须是链接（例如mysite1.html和mysite2.html）
3）两者都应该是黑白两色 4）在悬停时，其中一个应该长一点并变成彩色 5）点击进入mysiteX.html

我很确定互联网上有一些模板，但我不知道如何命名这个动画并且无法找到它。

修改
我正在寻找一个模板。我还没有尝试过，我不想从0开始，因为我很确定有一个可以使用的模板。

Answer 1

嗯，我认为使用css clip-path属性非常容易。你需要多边形形状。

以下是一篇很好的文章：https://css-tricks.com/clipping-masking-css/

以下是如何使用它来解决问题的示例：http://jsbin.com/linelegini/1/edit?html,css,js,output

Answer 2

试用HTML的map和area代码。在讨论形状包装时它们非常有用，在一些CSS和Scripting的帮助下，你可以得到一个花哨的VS屏幕。

Answer 3

由于Ivan，我能够创建所需的输出。对于CSS来说，我是最糟糕的，所以这可以改进很多。

使用包含Bootstrap的以下CSS

.l {
  clip-path: polygon(0% 0%, 100% 0%, 80% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 2;
}
.r {
  left: 540px;
  margin-left: -20%;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%,0% 100%);
  filter: grayscale(100%);
  position:absolute;
  z-index: 1;
}
.d {
  position:relative
}

使用以下HTML

<body>
    <div class="d">
    <div class="col-md-12 col-md-offset-3">
      <img class="pic l" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="leftImage">
      <img class="pic r" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="rightImage">
    </div>
    </div>
</body>

这个JS（canEnter变量远不是最好的解决方案，但它总比没有好）：

  window.onload = function(){
    var canEnter = true;
    $('#leftImage')[0].hX2 = $('#leftImage').height() * 2;
    $('#leftImage')[0].h = $('#leftImage').height();

    $('#leftImage').on('mouseenter', function(){
        if (!canEnter)
            return;
        canEnter = false;
        this.style.filter = 'none';
        this.style.zIndex = 2;
        this.style.clipPath = 'none';
        $(this).animate({height: $('#leftImage')[0].hX2}, "fast");
    });
    $('#leftImage').on('mouseleave', function(){
        $(this).animate({height: $('#leftImage')[0].h}, "fast", function(){
            this.style.filter = 'grayscale(100%)';
            this.style.zIndex = 1;
            this.style.clipPath = 'polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%)';
            if (!canEnter)
                canEnter = true;
        });
    });

    $('#rightImage').on('mouseenter', function(){
        if (!canEnter)
            return;
        canEnter = false;
        this.style.filter = 'none';
        this.style.zIndex = 2;
        this.style.clipPath = 'none';
        $(this).animate({height: $('#leftImage')[0].hX2, left: 300}, "fast");
    });
    $('#rightImage').on('mouseleave', function(){
        $(this).animate({height: $('#leftImage')[0].h, left: 540}, "fast", function(){
            this.style.filter = 'grayscale(100%)';
            this.style.zIndex = 1;
            this.style.clipPath = 'polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%)';
            if (!canEnter)
                canEnter = true;
        });
    });
  }

如何使用CSS和2个图像实现这种设计

3 个答案: