純CSS3滑鼠滑過圖片遮罩層動畫特效

簡要教程

這是一款使用純CSS3製作的滑鼠滑過圖片遮罩層動畫特效。該特效中，當滑鼠滑過或懸停在圖片上面時，會在圖片上出現遮罩層動畫，展示出圖片的描述資訊和連結表徵圖按鈕。

使用方法

在頁面中引入bootstrap樣式檔案和font-awesome字型表徵圖檔案。

<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="path/to/css/font-awesome.min.css">

HTML結構

該特效的HTML結構如下：

<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">                    <h3 class="title">雷神索爾</h3>                    <span class="post">卡通惡搞造型</span>                    <ul class="icon">                        <li><a href="#"><i class="fa fa-search"></i></a></li>                        <li><a href="#"><i class="fa fa-link"></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">                    <h3 class="title">蜘蛛俠</h3>                    <span class="post">卡通惡搞造型</span>                    <ul class="icon">                        <li><a href="#"><i class="fa fa-search"></i></a></li>                        <li><a href="#"><i class="fa fa-link"></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">                    <h3 class="title">鋼鐵俠</h3>                    <span class="post">卡通惡搞造型</span>                    <ul class="icon">                        <li><a href="#"><i class="fa fa-search"></i></a></li>                        <li><a href="#"><i class="fa fa-link"></i></a></li>                    </ul>                </div>            </div>        </div>    </div></div>

CSS樣式

為該滑鼠滑過圖片遮罩層特效添加如下的CSS樣式。

.box{    text-align: center;    overflow: hidden;    position: relative;}.box:before{    content: "";    width: 0;    height: 100%;    background: #000;    padding: 14px 18px;    position: absolute;    top: 0;    left: 50%;    opacity: 0;    transition: all 500ms cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}.box:hover:before{    width: 100%;    left: 0;    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;}.box .post{    font-size: 15px;    text-transform: capitalize;    opacity: 0;    transition: all 0.5s ease 0s;}.box:hover .title,.box:hover .post{    opacity: 1;    transition-delay: 0.7s;}.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;    border-radius: 50%;    background: #f74e55;    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.5s;}.box:hover .icon li:last-child a{    transition-delay: 0.8s;}@media only screen and (max-width:990px){    .box{ margin-bottom: 30px; }}