鼠标悬停放大图片特效

不念不忘少年蓝@ 2023-05-21 07:07 27阅读 0赞

## 鼠标悬停放大图片 ##

![在这里插入图片描述][format_png_pic_center]

鼠标悬停放大图片是个比较吸引人的特效。  
废话我就不多说了，直接上结局办法。

body中

style中

.img-wrapper { 
      width: 400px;
      height: 400px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    }
    
    .img-wrapper img { 
      height: 400px;
      -webkit-transition: 0.3s linear;
      transition: 0.3s linear;
    }
    
    .img-wrapper img:hover { 
      transform: scale(1.1);
    }
    
    .img-wrapper { 
      display: inline-block;
      box-sizing: border-box;
      border: 3px solid #000;
    }

如果你们想让图片更加炫酷可以加上图片过滤属性filter，让图片变灰或者变深褐色，然后悬停时候出现更加炫酷的颜色变幻。灰化的属性是filter: grayscale(100%);，然后深褐色化的属性是filter: sepia(100%)。

加入特效代码如下：  
body中

<div class="img-wrapper">
      <img
        class="grayscale-img"
        src="https://img-blog.csdnimg.cn/2020032211021728.png"
      />
    </div>
    
    
    <div class="img-wrapper">
      <img
        class="sepia-img"
        src="https://img-blog.csdnimg.cn/2020032122230564.png"
      />
    </div>

css中

/* ============== * 灰度过滤 * ==============*/
    .grayscale-img { 
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    
    .grayscale-img:hover { 
      -webkit-filter: grayscale(0);
      filter: grayscale(0);
    }
    
    /* ============== * 深褐色过滤 * ==============*/
    .sepia-img { 
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
    }
    
    .sepia-img:hover { 
      -webkit-filter: sepia(0);
      filter: sepia(0);
    }

就是这么简单。

[format_png_pic_center]: /images/20230521/8ecf8d3b04b34751bdbdc4ddaf00590f.png