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

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. epoll的内部实现 & 百万级别句柄监听 & lt和et模式非常好的解释

    epoll是Linux高效网络的基础,比如event poll(例如nodejs),是使用libev,而libev的底层就是epoll(只不过不同的平台可能用epoll,可能用kqueue). epo ...

  2. SaltStack实战

    SaltStack实战 #安装 安装注意几点 python-libs-2.6.6-64.el6.x86_64 conflicts with file from package python-2.6.6 ...

  3. 判断json数据是否为空

    json数据是没有length这个属性的 ,所以不能直接用.length()方法 我们可以先遍历,然后根据遍历次数求长度 1.在IE上这样遍历json:(js代码) var jsonLength = ...

  4. 解决asp.net Core Mvc网页汉字乱码问题

    跟着www.asp.net网页的教程做电影网站的例子时,将一些英文标签和按钮改成了汉字的,结果出现了乱码. 在网上搜索这方面的信息也不太多,看到大家众说纷纭,最后有解决问题的,也没有说清楚具体的办法, ...

  5. bootstrap笔记-栅格布局

    1.   .clearfix 这个类可以在栅格布局中起到一个不占空间的clear的作用,如下:可以尝试带.clearfix和不带它的区别 <div class="container-f ...

  6. SG函数 专题练习

    [hdu1536][poj2960]S-Nim 题意 题意就是给出一个数组h,为每次可以取石子的数目. 然后给你n堆石子每堆si.求解先手能不能赢? 分析 根据\(h\)数组预处理出\(sg[i]\) ...

  7. java程序

    package Dome3; import java.awt.Button; import java.awt.FlowLayout; import java.awt.Frame; import jav ...

  8. 转 Android开发笔记(成长轨迹)

    http://blog.csdn.net/mad1989/article/details/9142557

  9. hdu 5876 ACM/ICPC Dalian Online 1009 Sparse Graph

    题目链接 分析:这叫补图上的BFS,萌新第一次遇到= =.方法很简单,看了别人的代码后,自己也学会了.方法就是开两个集合,一个A表示在下一次bfs中能够到达的点,另一个B就是下一次bfs中到不了的点. ...

  10. 第九章 企业项目开发--分布式缓存Redis(1)

    注意:本章代码将会建立在上一章的代码基础上,上一章链接<第八章 企业项目开发--分布式缓存memcached> 1.为什么用Redis 1.1.为什么用分布式缓存(或者说本地缓存存在的问题 ...