<!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. Qt窗口添加鼠标移动拖拽事件

    1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...

  2. kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

    kindeditor多图片上传找不到action原来是private File upload成员变量惹得祸

  3. scrapy爬虫框架入门实例（一）

    流程分析 抓取内容(百度贴吧:网络爬虫吧) 页面: http://tieba.baidu.com/f?kw=%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB&ie=ut ...

  4. Libevent 的多线程操作

    起因是event_base 跨线程add/remove event 导致崩溃或者死循环. 据查:libvent 1.4.x是非线程安全的,要跨线程执行event_add,会有问题.因此传统做法是通过p ...

  5. switch语句下的变量声明和定义

    switch语句下的变量声明和定义的问题: switch...case...语句中存在声明和定义会出现一些问题.这个由switch语法特性决定的, switch中每个case都是平等的层次,区别于一般 ...

  6. 极光推送NotificationServiceTest.appex文件变红不存在丢失解决办法

    这个图片是文件丢失的 创建.appex文件 创建.appex文件 把极光demo里面的这两个文件复制粘贴到新的文件件(新创建的文件是 UIViewController类型的所以就把 (Notifica ...

  7. AFN中的PATCH 和 DELETE 请求方式

    - (nullable NSURLSessionDataTask *)PATCH:(NSString *)URLString parameters:(nullable id)parameters su ...

  8. VS2010+C#+AutoCAD2008时断点调试功能无效的处理方法

    把acad.exe.config文件修改为:------------------------------------------------------------------------------ ...

  9. Nginx-->基础-->理论-->nginx进程模型

    一.nginx的进程模型基础 如上图,是nginx的基本进程模型. 1.nginx的master进程与worker进程关系 nginx的master进程负责worker进程的管理,包括创建worker ...

  10. 2.jenkins配置邮件提醒

    1.前言 在Jenkins的使用中邮件提醒是一个常用功能,Jenkins默认安装了Mailer Plugin插件用于实现此功能. 2.邮件服务器配置 首先在Jenkins的"系统管理&quo ...