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

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. HTML中IFrame父窗口与子窗口相互操作

    一.Iframe篇 //&&&&&&&&&&&&&&&&&&am ...

  2. mysql 登录及常用命令

    一.mysql服务的启动和停止 mysql> net stop mysql mysql> net start mysql 二.登陆mysql mysql> 语法如下: mysql - ...

  3. python 高级特性

    from http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000 set set和dict ...

  4. 启动tomcat后struts框架报异常严重: Exception starting filter struts2 Unable to load configuration.

    启动tomcat后struts框架报异常严重: Exception starting filter struts2 Unable to load configuration. 出现此异常是因为,str ...

  5. android,NDK android.mk相关

    1.c++ try...catch的支持 需要在Android.mk 中添加 LOCAL_CPPFLAGS += -fexceptions,或者在Application.mk中添加APP_CPPFLA ...

  6. Knockout学习笔记之一

    1.  四大关键理念: A. DeclarativeBindings(声明式绑定) Easily associate DOM elements with model data using a conc ...

  7. miniui设置边框的方法

    if (field == "loginname") { if (record._id == 2) { e.cellHtml = ""; e.cellStyle ...

  8. 联机事务处理OLTP（on-line transaction processing）和联机分析处理OLAP（On-Line Analytical Processing)

         什么是OLAP(联机分析处理)?      这个是和数据处理非常相关的一个概念.接触过BI(商务智能)的同学一定清楚. 数据处理大致可以分成两大类:联机事务处理OLTP(on-line tr ...

  9. Pig与Hive的区别

    Language 在Hive中可以执行  插入/删除 等操作,但是Pig中我没有发现有可以 插入 数据的方法,请允许我暂且认为这是最大的不同点吧. Schemas Hive中至少还有一个“表”的概念, ...

  10. chromium 一些设置 --插件安装

    一.安装flash插件 打开网页 http://get.adobe.com/cn/flashplayer/otherversions/ 选择如图 所示  fp 18 for Opera and Chr ...