纯CSS3/jQuery实现图片放大文字淡入遮罩(博客吧婚纱展示效果)

纯CSS3/jQuery实现图片放大文字淡入遮罩(博客吧婚纱展示效果)
插件描述:用纯CSS3或jQuery实现的图片放大和文字淡出效果(可自选),仿自博客吧婚纱照显示的效果。

使用方法

载入JavaScript和CSS文件:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>//可选

CSS样式:

.categories{margin:50px 10px 0;font-size:16px;}
.categories li{float:left;position:relative;display:inline;width:48.25%;height:auto;margin-bottom:30px;overflow:hidden;}
.categories li a{display:block;width:100%;height:100%;color:#fff;}
.categories li img{display:block;width:100%;height:auto;transition:all 0.5s;}
.categories li .title{position:absolute;left:0;bottom:0;width:100%;height:100%;display:none;background:rgba(0,0,0,0.4);text-align:center;font-size:1em;line-height:1.5;font-family:Arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color:#fff;overflow:hidden;}
.categories li .title p{position:absolute;top:50%;left:0;width:100%;height:3em;margin-top:-1.5em;display:block;}
.categories li .title p span{display:block;font-size:1em;text-transform:uppercase;}
@media screen and (max-width:639px){
    .categories li:nth-child(2n+1){margin-right:3.5%;}
}
@media screen and (min-width:640px){
    .categories li{width:31.8%;}
    .categories li:nth-child(3n+1), .categories li:nth-child(3n+2){margin-right:2.3%;}
}
@media screen and (min-width:1280px){
    .categories{width:1200px;margin-left:auto;margin-right:auto;}
    .categories li{width:380px;}
    .categories li:nth-child(3n+1), .categories li:nth-child(3n+2){margin-right:30px;}
}
@media screen and (min-width:420px){
    .categories li .title{font-size:1.25em;}
}
@media screen and (min-width:960px){
    .categories li .title{font-size:1.75em;}
}

/* 纯css实现效果,用jQuery实现时不需要这些 */
.transition li img{transition:all 0.5s;transform:scale(1,1);}
.transition li:hover img{transform:scale(1.4,1.4);}
.transition li .title{display:block;transition:all 0.4s;opacity:0;}
.transition li:hover .title{opacity:1;}

DOM结构:

//用纯CSS3实现时,需要加上 .transition 样式
<ul class="categories transition clearfix">
    <li>
        <div class="thumbnail"><a href="javascript:void(0)" title="优雅韩风"><img src="images/img-1.jpg" alt="优雅韩风"></a></div>
        <div class="title"><a href="javascript:void(0)" title="优雅韩风"><p><span>elegantkorea</span>优雅韩风</p></a></div>
    </li>
    <li>
        <div class="thumbnail"><a href="javascript:void(0)" title="经典欧风"><img src="images/img-2.jpg" alt="经典欧风"></a></div>
        <div class="title"><a href="javascript:void(0)" title="经典欧风"><p><span>classic ou feng</span>经典欧风</p></a></div>
    </li>
    <li>
        <div class="thumbnail"><a href="javascript:void(0)" title="薇光花园"><img src="images/img-3.jpg" alt="薇光花园"></a></div>
        <div class="title"><a href="javascript:void(0)" title="薇光花园"><p><span>eu light graden</span>薇光花园</p></a></div>
    </li>
</ul>

JavaScript调用方式:

/* jQuery实现效果,用纯CSS3时不需要这些 */
$(document).ready(function(){
    $('.categories li').hover(function(){
        var $title = $(this).children('.title');
        if(!$title.is(':animated')){
            $title.fadeIn(400);
        }
        $(this).find('img').css({'transform':'scale(1.4,1.4)'});
    },function(){
        $(this).find('.title').fadeOut('fast').end().find('img').css({'transform':'scale(1,1)'})
    });    
});