<!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. Exhange上添加IMAP4

    1.登录到Exchange admim Center,选择servers,双击servers名称,选择IMAP4 2.服务器上查看任务管理器中的服务器,找到exchange imap4两个服务器是否开 ...

  2. redis命令String

    $ keys * $ rename oldkey newkey $ renamex oldkey newkey 新key存在抛出异常 $ dbsize $ expire key 时间(秒) $ ttl ...

  3. select标签非空验证，第一个option value=""即可

    select标签非空验证,第一个option value=""即可,否则不能验证

  4. alhpa阶段回顾

    说明:本次课程,大家按照我下面列出来的问题进行回顾和反思,总结alhpa阶段以来的得失.每个组都要回答这些问题.由组长或者组员来回答都可以.目的依然是让大家养成软工的一些习惯和思维方式. 1.最初的需 ...

  5. Win10怎么设置始终以管理员身份运行应用程序

    第一步.对着Win10应用程序桌面图标单击鼠标右键,菜单中选择“属性”; 第二步.在程序属性对话框,点击切换到“兼容性”选项卡,找到并勾选“设置”项目下的“以管理员身份运行此程序”后,点击确定即可. ...

  6. Android开源框架——Volley

    Volley 是 Google 在 2013 I/O 大会上推出的 Android 异步网络请求框架和图片加载框架.特别适合数据量小,通信频繁的网络操作.Volley 主要是通过两种 Diapatch ...

  7. nginx 隐藏版本信息

    隐藏nginx头部  修改后的src/core/nginx.h ,代码如下:   /*  * Copyright (C) Igor Sysoev  * Copyright (C) Nginx, Inc ...

  8. Android调试小技巧(LogCat不输出、Log自动清空、install时timeout)

    问题:有时候明明连接了设备,而LogCat却没有输出 解决方法:在device界面点一下对应设备,使其处于选中状态(它适用于查看手机文件不显示的情况) 问题:前面记录的Log看着看着突然被清空了 解决 ...

  9. Codeforce 370J Bottles(动态规划-01背包）

    题目链接:http://codeforces.com/problemset/problem/730/J 题目大意:有n个杯子, 每个杯子有两个值一个是已装水量,一个是可装水量.从一个杯子向另一个杯子倒 ...

  10. GridLayout自定义数字键盘(两个EditText)

    功能说明: 适用于两个EditText输入框,并控制输入字符的长度,点击键盘中的"确定"按钮完成输入,点击"前一项"光标跳到前一个EditText 运行效果图如 ...