CSS3 + JS：图片展示（卡片式蒙版）

前端 JavaScript

一、JS原生方法

HTML部分

<ul id="picList">
    <li>
        <img src="1.jpg" />
        <a href='#'>
            学会html5 绝对的屌丝逆袭<br/>
            本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征
        </a> 
    </li>
</ul>

CSS部分

*{
    transition: all .2s ease-in;
    /* 可增加动效，但兼容性不佳； */
}
body, ul, li, ol {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-family: 微软雅黑;
}
img {
    border: 0px;
}
ul {
    width: 100%;
    float: left;
}
li{
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
    float: left;
    margin: 10px 0 0 10px;
}
img, a {
    position: absolute;
    top: 0px;
    left: 0px;
}
img {
    width: 100%;
}
a {
    display: block;
    width: 280px;
    height: 180px;
    top: 160px;
    background:#000;
    color: white;
    font-style: normal;
    line-height: 25px;
    padding: 10px;  
    text-decoration: none;
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    -ms-opacity: 0.8;
    -khtml-opacity: 0.8;
    -webkit-opacity: 0.8;
    -0-opacity: 0.8;
    opacity: 0.8;
}

JS部分

function imgDisplay(){
    var li = document.getElementById('picList').getElementsByTagName('li');
    var liHeight = 160;
    for(var i = 0; i < li.length; i++){
        li[i].onmouseover = showMeg;
        li[i].onmouseout = hideMeg;
        }
    function showMeg(){
        this.getElementsByTagName('a')[0].style.top = 0;
    }
    function hideMeg(){
        this.getElementsByTagName('a')[0].style.top = liHeight+'px';
    }
}
imgDisplay();

二、纯CSS3方法

HTML部分同上，CSS代码如下：

*{
    transition: all .1s ease-in;
}
body, ul, li, ol {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 12px;
    font-family: 微软雅黑;
}
img {
    border: 0px;
}
ul {
    width: 100%;
    float: left;
}
li{
    width: 300px;
    height: 200px;
    position: absolute;
    float: left;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -100px;
}
img, a {
    position: absolute;
    top: 0px;
    left: 0px;
}
img {
    width: 100%;
}
a {
    display: block;
    width: 280px;
    height: 150px;
    top: auto;
    bottom: 60px;
    background:#000;
    color: white;
    font-style: normal;
    line-height: 25px;
    padding: 10px;  
    text-decoration: none;
    filter:alpha(Opacity=0);
    -moz-opacity:0;
    -ms-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
}
img:hover+a,
a:hover{
    bottom: 30px;
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    -ms-opacity: 0.8;
    -khtml-opacity: 0.8;
    -webkit-opacity: 0.8;
    -o-opacity: 0.8;
    opacity: 0.8;
}

附：参考

慕课：图片展示特效
Demo下载
梨山宾馆 >> 梨山风华 >> 周边景点