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

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. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  2. Integer

    import static java.lang.System.*; public class IntegerTestOne{ public static void main(String []args ...

  3. 使用Nexus创建Maven私服

    Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维护和外部仓库的访问.利用Nexus你可以只在一个地方就能够完全控制访问和部署在你所维护仓库中的每个Artifact.Nexus ...

  4. Java防盗链机制

    对于防盗链技术,网上提供了很多很多的相关技术,但是不是特别复杂就是效果不好. 这里在网上找到一种思路,就是关于HTTP协议响应头中包含的Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可 ...

  5. 聊天界面之进度条cell(一)

    ProgressCell用于显示文件传输的进度,困难点在于根据下载进度更新cell的进度条,先后尝试了几种方法: 1.有新的下载进度时,直接调用reloadData() 2.使用reloadRowsA ...

  6. 在centos6.5中安装github的客户端git

    简介 git是一个分布式版本控制软件,我采用的采用的安装方式是源码安装 1.安装编译git时需要的包 # yum install curl-devel expat-devel gettext-deve ...

  7. jquery.SuperSlide.2.1.2--轮播（兼容到IE7 适用于整屏）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  8. JavaWeb基础: ServletConfig

    基本概念 ServletConfig用于配置Servlet的参数:在Servlet的配置文件中,可以使用一个或者是多个<init-param> 标签为Servlet配置一些初始化参数.当有 ...

  9. Linux 安装图形界面及远程连接

    #可查询哪些组件是否已经安装(可用来对照组件名称) yum grouplist yum groupinstall 'X Window System' -y #安装GNOME桌面环境 yum group ...

  10. web项目的日志打印位置设置

    1, 若在项目中放logback.groovy文件(如: src/test/resource下),则日志会打印到控制台上. logback.groovy 内容如下: // // Built on Fr ...