CSS3鼠标悬停图片显示遮罩特效

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:14px 18px;
        position:absolute;
        opacity:0;
    }

    .box:hover:before{
        opacity:0.5;
    }
    .box img{
        width:100%;
        height:auto;
    }

    .box .box-content{
        width:100%;
        padding:14px 18px;
        color:#fff;
        position:absolute;
        top:38%;
        left:0;
    }

    .box .title{
        font-size:25px;
        font-weight:600;
        line-height:30px;
        text-transform:uppercase;
        margin:0;
        opacity:0;
        transition:all 0.5s ease 0s;
        transform:translateY(50px);
    }


    .box:hover .title{
        opacity:1;
        transform:translateY(0px);
    }
    .box .icon{
        padding:0;
        margin:0;
        list-style:none;
        margin-top:15px;
    }
    .box .icon li{
        display: inline-block;
    }
    .box .icon li a{
        display:block;
        width:40px;
        height:40px;
        line-height:40px;
        font-size:20px;
        font-weight:700;
        color:#fff;
        margin-right:5px;
        opacity:0;
        transform:translateY(50px);
        transition:all 0.5s ease 0s;
    }
    .box:hover .icon li a{
        opacity:1;
        transform:translateY(0px);
        transition-delay:0.3s;
    }

    @media only screen and (max-width:990px){
        .box{
            margin-bottom:30px;
        }
    }
</style>

</head>
<body>
<div class="demo">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img src="images/1.jpg">
                    <div class="box-content">
                        <h5 class="title">Project Name</h5>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-expand fa-2x"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img src="images/2.jpg">
                    <div class="box-content">
                        <h5 class="title">Project Name</h5>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-expand fa-2x"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-sm-6">
                <div class="box">
                    <img src="images/3.jpg">
                    <div class="box-content">
                        <h5 class="title">Project Name</h5>
                        <ul class="icon">
                            <li><a href="#"><i class="fa fa-expand fa-2x"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
demo.css
body, html { font-size: 100%;   padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

body{
    background: #494A5F;
    color: #D5D6E2;
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a{ 
    color: rgba(255, 255, 255, 0.6);
    outline: none;
    text-decoration: none;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
a:hover,a:focus{
    color:#74777b;
    text-decoration: none;
}
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
根据http://www.lanrenzhijia.com/pic/3904.html上提供的代码改编
CSS3鼠标悬停图片显示遮罩特效

猜你喜欢
