半透明遮罩层

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

</style>
</head>
<style>
.ul-case-i{
list-style: none;
margin-top: 200px;
}
.ul-case-i li{
float:left;
padding: 0 15px;
overflow: hidden;
}
.ul-case-i li a{
display: block;
position: relative;
transition: 0.3s;
-webkit-transition:0.3s;
color:#333;
text-decoration: none;
}
.ul-case-i li .pic img{
width:100%;
display: block;
}
.hover{
position:absolute;
left:0;
top:-100%;
width:100%;
height:100%;
text-align: center;
background: #363636;
opacity: 0.5;
color:#fff;
transition: 0.3s;
-webkit-transition:0.3s;
}
.hover b{
width:0;
height:100%;
display: inline-block;
vertical-align: middle;
}
.txt{
display: inline-block;
vertical-align: middle;
}
h3{
font-weight: normal;
}
</style>
<body>
<ul class="ul-case-i">
<li>
<a>
<div class="pic"><img src="images/1-1604211551200-L.jpg" alt="柏林家政"></div>
<div class="hover">
<b></b>
<div class="txt">
<img src="images/logo_small.png" >
<h3>VVVVVV</h3>
</div>
</div>
</a>
</li>
</ul>
</body>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(‘.ul-case-i‘).mouseover(function(){
$(‘.hover‘).css(‘top‘,‘0%‘);
});
$(‘.ul-case-i‘).mouseout(function(){
$(‘.hover‘).css(‘top‘,‘-100%‘);
})
})
</script>
</html>

时间: 2024-10-19 04:56:38

半透明遮罩层的相关文章

C# Winform 实现自定义半透明遮罩层介绍

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8     /// <summary>

jq 弹半透明遮罩层

jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s|\u00A0)+$/g,Ya=/^(?:)?$/,ga=navigator.userAgent,Fa=false,ha=[],aa,pa=Object.prototype.toString,qa=Object.prototype.hasOwnProperty,ra=Array.prototype.push

C# Winform 实现自定义半透明loading加载遮罩层

在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 using System; 2 using System.Drawing; 3 using System.Windows.Forms; 4 using System.ComponentModel; 5   6 namespace MyOpaqueLayer 7 { 8 /// <summary> 9 /

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

Winform应用程序实现通用遮罩层

Winform应用程序实现通用遮罩层 在WEB上,我们在需要进行大数据或复杂逻辑处理时,由于耗时较长,一般我们会在处理过程中的页面上显示一个半透明的遮罩层,上面放个图标或提示:正在处理中...等字样,这样用户体验就比较好了,然而如果在Winform客户端程序,通常遮罩层的处理就显得不那么简单或不那么好看,而我今天要说明的是,我实现的这个Winform通用遮罩层,却可以实现类似WEB上的遮罩层,既可以透明,而且还可以显示动态图片以及文字,那如何实现的呢,我现在一一讲解. 首先要明确我们要实现的效果

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

点击弹出居中带有透明遮罩层窗口

点击弹出居中带有透明遮罩层窗口:本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

利用div实现遮罩层效果

利用div实现遮罩层效果就是利用一个全屏.半透明的div遮住页面上其它元素,典型的例子就是百度的登录界面.下面贴出示例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; h

Android自定义遮罩层设计

在做网页设计时,前端设计人员会经常用到基于JS开发的遮罩层,并且背景半透明.这样的效果怎么样在Android上实现呢?这个实现并不困难,先来上效果图: <ignore_js_op> 20121029222704.jpg (29.46 KB, 下载次数: 61) 下载附件  保存到相册 2013-5-3 15:29 上传 本实例源码下载:点击下载 PopMaskViewActivity代码: [mw_shl_code=java,true]package com.sunchis.demo; imp