仿飞书背景蒙层+小眼睛效果

点击进入飞书

由于我没有参照原这部分的方法只是自己想出来的所以归纳了以下分析

分析：
图片鼠标移入移出产生了几个效果
1.鼠标移入后产生背景蒙层
2.鼠标移入后产生产生小眼睛效果（由小变大）
3.鼠标移入后和移出后图片以下框子产生阴影效果(但图片部分没有阴影效果)
4.鼠标移入和移出有淡入淡出效果

问题点：
1.眼睛变大，淡入淡出效果
2.蒙层插在哪里？
3.鼠标移到上面的图片但是上面没有阴影反而下面产生阴影

如果轻松想出以上问题那么就出门左拐把~~

这是我完成后的效果
整体来说是一个很简单的过程

<li class="industry-item">
     <div class="industry-all">
       <img class="industry-img" src=""></img>
       <a class="industry-img-bg" onclick="window.location.href=''">
           <i class="iconfont industry-img-eye"></i>
       </a>
       <div class="industry-btm-all">
         <div class="industry-little-title">
           <a href="{{item.url}}">hello</a>
         </div>
         <div class="industry-little-value">hello</div>
       </div>
   </div>
 </li>

主要是讲个思维 代码就别想跑通了啊~

解答：

一、如何加背景蒙层

这里首先回答最简单的，背景蒙层可以放到想展示图片的兄弟元素节点上

显示方法呢直接绝对定位就完事~
记得给整个元素设个relative~

      .industry-img-bg{
            cursor: pointer;
            position: absolute;
            width: 380px;
            height: 214px;
            top:0;
            left: 0;
            background: radial-gradient(rgba(74,81,91,0.4), rgba(22,23,25,0.7));
            }

二、眼睛如何变大以及如何淡入淡出

我使用的方法是使用 opacity+transition

.industry-img-eye{
            position: absolute;
            width: 0px;
            height:0px;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            color: #fff;
            opacity: 0;
            transition:all 0.3s;
        }

三、鼠标移到上面的图片但是上面没有阴影反而下面产生阴影

直接一个选择器就好啦

.industry-img-bg:hover + .industry-btm-all{
    box-shadow: 0px 10px 15px 0px rgba(224,229,244,0.9); 
}

相邻兄弟选择器
相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素
用的不多但是巧用很棒喔