悬停变化

前言

今天偶然在百度地图的API文档网站上看到了一个图片悬停由黑白图片变化成彩色图片且有放大效果的场景。于是一时手痒想要自己实现一下。

这种悬停变化的效果可以更突出选中的区块，有助于吸引用户去关注自己所选部分。效果请点我

准备开始

这样小小的一个效果。其实可以考验很多知识点，我决定采用几种不同的的方式来实现这个效果。

方案1

方案1使用一张黑白照片和一张彩色照片。利用CSS3的transition和transform来实现这个效果。

首先是html的代码模板。后面几种和这个模板差不多，就不做引入：

html.png

html代码分为外部容器 ，每一项为一个item，内部包含一个img-item和text-item。

CSS基础样式代码如下：

css.png

这样，外部容器使用flexbox布局，内部item固定为290px宽。图片和文本区域也均为290px宽，图片为215px高。定位为relative，这样图片区域仍会占据文档。图片定位为absolute，这样两张图片会重叠在一起。初始z-index均为1 。这样，第二张图片（黑白图片）会在第一张图片（彩色图片）上方并正好遮盖住第一张图片。

以上是准备工作。现在有了基本的样式，就可以开始动画部分了。

  .img {transition: all .6s ease 0s;} // 首先给图片定义动画时间
  .item:hover  .img:last-child{
    z-index: -1;
    transform: scale(1.15);
    } // 当在item上悬停的时候，当前显示图片（last-child）的z-index变为-1.那么第一张图片就会显示出来。同时放大这张图片。
  .item:hover  .img:first-child{
    transform: scale(1.15);
    } // 第一张图片（彩色图片）放大

ok，就这样短短的几行代码就可以实现这个图片悬停变大，变色的功能。不过会有漏洞，就是如果定义多个item，就需要区分开这些图片了，不做解释。如果用scss来做就简单多了。

方案2

方案2我准备只用一张彩色图片就实现这样的效果。图片越少越好啊。基础代码部分除了html少了一个图片外其余不变。

首先。我们只保留了彩色图片，需求中说初始的图片是一个黑白的图片。我们可以使用filter的grayscale属性来完成灰度的操作

  .img {
    filter: grayscale(100%) ;// 百分之百就是纯黑白了
    transition: transform .5s; // 同样，transform部分要有0.5秒的过渡
  }

   .item:hover .img {
        filter: grayscale(0);
        transform: scale(1.15);
    } // 当item在悬停时，灰度变为彩色，并进行放大

用一张图片，css代码比上面的还要少。果然知识的力量是巨大的。
不过还是存在问题就是如果有多张图片依然需要逐个区分

方案3

这个方案我希望用JavaScript来实现。这样确实是没有用CSS实现来的简单。正在编码中。。。

感兴趣的小伙伴可以去我的github地址查看源码。github地址
持续更新。。。