transform:translateY(50px);
transform:translateY(0px);
这两行代码实现了元素从下向上移动
opacity:0;
opacity:0.5;
遮罩是通过透明度实现的
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3鼠标悬停图片显示遮罩特效</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
.demo{
padding:2em 0;
}
.box{
text-align:center;
overflow:hidden;
position:relative;
}
.box:before{
content:"";
width:100%;
height:100%;
background-color:#000;
padding:14