鼠标移入时弹出蒙版！！！

html<!DOCTYPE html<html lang="en"<head>

    <meta charset="UTF-8">
    <link rel="stylesheet" href="zimutanchu.css">
    <title>Title</title>
</head>
<body>
<div class="mu1">
    <div class="mu2">
        <ul>
            <li>
                <a href="">
                    <img src="img/46.jpg" alt="">

                    <div class="zi">
                        <div class="tu1">
                        <img src="img/55.jpg" alt="">
                        </div>
                        <h5>hufef ef</h5>
                    </div>

                </a>
            </li>

        </ul>
    </div>
</div>

</body>
</html>

css:
*{
    margin: 0;
    padding: 0;
}

.mu1{
    width: auto;
}
.mu2{
    width: 1200px;
    height: 400px;
    margin: auto;
}
ul{
    width: 1200px;
    height: 230px;
    border: 1px solid red;

}
ul li{
    width: 25%;
    list-style: none;
    float: left;
    position: relative;
    overflow: hidden;
}
.zi{
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 100px;
    background-color: transparent;
}
.tu1{
    float: left;
}
h5{
    float: left;
}
ul li:hover .zi{
    background-color: black;
    opacity: .5;
    left: 0;
    bottom: 0;
    transition: all linear 1s;
}

html+css图片下弹出蒙版的更多相关文章

  1. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

  2. 一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

    一.简单的移动端tab头部二级下拉导航栏,向下弹出,向上隐藏 <html lang="en"> <head> <meta charset=" ...

  3. MVVM模式下弹出窗体

    原地址:http://www.cnblogs.com/yk250/p/5773425.html 在mvvm模式下弹出窗体,有使用接口模式传入参数new一个对象的,还有的是继承于一个window,然后在 ...

  4. css模仿微信弹出菜单

      css模仿微信弹出菜单 效果图: html: <div class="action-sheet-backdrop"> <div class="act ...

  5. JS/CSS 在屏幕底部弹出消息

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  6. android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动

    android 闹钟提醒并且在锁屏下弹出Dialog对话框并播放铃声和震动            1.先简单设置一个闹钟提醒事件: //设置闹钟 mSetting.setOnClickListener ...

  7. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  8. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  9. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

随机推荐

  1. Window 常用文件

    *.msm ntwdblib.dll是一款用于PHP连接MSSQL2005或2008的驱动文件,如果连接BDE的时候出现“cannot load an idapi service liabray fi ...

  2. linux笔记：shell基础-环境变量配置文件

    source命令(重新读入配置文件,不用重启就直接生效): 环境变量配置文件: linux中的环境变量配置文件(~代表当前用户的家目录): 配置文件读取顺序: /etc/profile 文件的作用:

  3. 【bzoj1098】办公楼

    [bzoj1098]办公楼 题意 FGD开办了一家电话公司.他雇用了N个职员,给了每个职员一部手机.每个职员的手机里都存储有一些同事的电话号码.由于FGD的公司规模不断扩大,旧的办公楼已经显得十分狭窄 ...

  4. banner秒杀

    永远显示 未开始/进行中(需要用到两个for循环,第一个我没有想到,诗詹帮我写的) function timeList(){ myTime = new Date().getTime() var ite ...

  5. 读《程序员的SQL金典》[4]--SQL调优

    一.SQL注入 如果程序中采用sql拼接的方式书写代码,那么很可能存在SQL注入漏洞.避免的方式有两种: 1. 对于用户输入过滤敏感字母: 2. 参数化SQL(推荐). 二.索引 ①索引分类 聚簇索引 ...

  6. 测试nfs和cifs

    losetup /dev/loop1 file1.img losetup /dev/loop2 file2.img losetup /dev/loop3 file3.img mkfs -t ext4 ...

  7. iOS开发多线程篇—创建线程

    iOS开发多线程篇—创建线程 一.创建和启动线程简单说明 一个NSThread对象就代表一条线程 创建.启动线程 (1) NSThread *thread = [[NSThread alloc] in ...

  8. 计算机网络(6)-----运输层概述和UDP协议

    运输层(Transport Layer) 定义 运输层负责端到端的通信,既是七层模型中负责数据通信的最高层,又是面向网络通信的低三层和面向信息处理的最高三层之间的中间层.运输层位于网络层之上.会话层之 ...

  9. 建筑行业如何用BPM替换OA？

    2015年4月,K2正式与上海水石建筑规划设计有限公司签约. 为提高公司运作流程的效率,有效的对各流程的运作管理和优化,降低成本,同时提高公司的资金管理水平,水石公司利用K2系统作为整个公司流程的管理 ...

  10. 《大象-Think In UML》读书笔记3

    建模,是指通过对客观事物建立一种抽象的方法用以表征事物并过得对事物本身的理解,同时把这种理解概念化,将这些逻辑概念组织起来,构成一种对所观察的对象的内部结构和工作原理的便于理解的表达. 建模包含两个问 ...