<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.zhezhao{ display:block; width:227px; height:250px; position:absolute; left:0; top:0; background:#333; opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);  -webkit-transition:all 0.8s ease-in-out 0s;-moz-transition:all 0.8s ease-in-out 0s;-o-transition:all 0.8s ease-in-out 0s;transition:all 0.8s ease-in-out 0s; }

.bian:hover .zhezhao{display:block; opacity:0.7; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); }

.bian:hover .bian_01:hover .zhezhao{ opacity:0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); }

.bian_01{position:relative;}

    </style>

</head>

<body>

            <div style="width:1920px;height:480px;background:#F2F2F3;">

                <div class="bian" style="width:950px;height:395px;margin:0 auto;">

                     <img src="https://gdp.alicdn.com/imgextra/i2/144939/TB21INknXXXXXbEXXXXXXXXXXXX_!!144939.png" style="border:0;vertical-align:top;" alt="" />

                    <div class="bian_01" style="margin-right:14px;width:227px;height:250px;float:left;overflow:hidden;">

                         <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i1/144939/TB2br3OmVXXXXc0XpXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>

                    </div>

                    <div class="bian_01" style="margin-right:14px;width:227px;height:250px;float:left;overflow:hidden;">

                         <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i4/144939/TB2rz34mVXXXXaJXpXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>

                    </div>

                    <div class="bian_01" style="margin-right:14px;width:227px;height:250px;float:left;overflow:hidden;">

                         <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i2/144939/TB2LrFxnXXXXXXsXXXXXXXXXXXX_!!144939.png" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>

                    </div>

                    <div class="bian_01" style="width:227px;height:250px;float:left;overflow:hidden;">

                         <a href="" target="_blank"> <img src="https://gdp.alicdn.com/imgextra/i4/144939/TB24.yjspXXXXbTXpXXXXXXXXXX_!!144939.jpg" style="border:0;" alt="" /> </a> <a class="zhezhao" href="" target="_blank"></a>

                    </div>

                </div>

            </div>

</body>

</html>

纯css实现模块阴影变色效果的更多相关文章

  1. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  3. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  4. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  5. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  6. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  7. 纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

  8. 33.纯 CSS 创作牛奶文字变换效果

    原文地址:https://segmentfault.com/a/1190000015037234 感想:transform: translateY(50% & -50%);  animatio ...

  9. 一个纯CSS实现的卡片翻转效果

    先上代码 <div id="box"> <div class="front">正面</div> <div class= ...

随机推荐

  1. Graded Browser Support

    ( The YUI Target Environments Matrix is here) About the Browser Test Baseline and Operating Systems ...

  2. c#窗体去掉borderstyle进行拖动

    private void BaseCForm_Load(object sender, EventArgs e)        {            DrawStyle(); this.panel1 ...

  3. unity中三种调用其他脚本函数的方法

    第一种,被调用脚本函数为static类型,调用时直接用  脚本名.函数名()第二种,GameObject.Find("脚本所在的物体的名字").SendMessage(" ...

  4. js 赋值 要用 toString() ; 太坑了。

    js 赋值 要用 toString() ;     太坑了. js 赋值 要用 toString() ;     太坑了. js 赋值 要用 toString() ;     太坑了.

  5. MacOS清除管理员密码

    1.重启 mac ,按住 Command + s 键,进入当用户模式,直达出现黑底白字的屏幕,再松开.输入(重新挂载根文件系统为可读写):mount -uw / 2.然后输入:rm /var/db/. ...

  6. 驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址

    驱动开发学习笔记. 0.07 Uboot链接地址 加载地址 和 链接脚本地址 最近重新看了乾龙_Heron的<ARM 上电启动及 Uboot 代码分析>(下简称<代码分析>) ...

  7. 冷门JS技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  8. linux RPM、YUM

    Linux 界的两大主流: RPM 与 DPKG distribution 代表 软件管理机制 使用指令 在线升级机制(指令) Red Hat/Fedora RPM rpm, rpmbuild YUM ...

  9. java_js_json_日期格式化

    调用方法: var createBeginTime= createBeginTime.Format("yyyy-MM-dd 00:00:00"); 方法: Date.prototy ...

  10. C/C++入门基础---指针（2）

    5,数组指针的不同含义 int a[5][10]; printf(%d, %d, %d\n", a, a+1, &a+1);  //1310392,1310432,1310592 a ...