碼上歡樂
相關內容    簡體    繁體

6中鼠標移入顯示遮罩層效果

本文轉載自   查看原文   2017-05-16 14:56   1847    jquery 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>遮罩效果</title>
    <style>
　　　　


@charset "utf-8";
*{padding: 0; margin: 0;}
img{border: none;}
ol,ul,li{list-style: none;}
a{text-decoration: none;}
body{ font-family: "寰蔣闆呴粦";}

/*----------- 閬僵鍐呭鍖� 寮€濮�------------------------------------*/
/*----------- 浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉 寮€濮�---------------------------*/

.content{
    width:1200px;
    height: 428px;
    margin:20px auto;
    padding: 15px 25px 15px 25px;
}
.con{
    width: 270px;
    height: 200px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
}
.con img{
    width:270px;
    height: 200px;
}
.txt{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.txt h3{
    font-weight: normal;
}
.txt p{
    font-size: 14px;
    display: block;
    line-height: 20px;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -moz-margin-before: 1em;
    -moz-margin-after: 1em;
    -moz-margin-start: 0px;
    -moz-margin-end: 0px;
}
/*------------- 浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉 緇撴潫 ------------------------------*/
/*------------- 鐩存帴鏄劇ず閬僵鏁堟灉 寮€濮� ------------------------------*/
.content-two{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-two{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
}
.con-two img{
    width:297px;
    height: 198px;
}
.txt-two{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    display: none;
}
.txt-two h3{
    font-weight: normal;
}
.txt-two p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 鐩存帴鏄劇ず閬僵鏁堟灉 緇撴潫------------------------------*/
/*------------- 浠庡乏涓婇儴鏄劇ず閬僵鏁堟灉  寮€濮�----------------------------*/
.content-three{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-three{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.con-three img{
    width:297px;
    height: 198px;
}
.txt-three{
    position: absolute;
    left: -297px;
    top: -198px;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    filter:Alpha(opacity=80);
}
.txt-three h3{
    font-weight: normal;
}
.txt-three p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 浠庡乏涓婇儴鏄劇ず閬僵鏁堟灉  緇撴潫----------------------------*/
/*------------- 浠庡乏渚ф樉紺洪伄緗╂晥鏋� 寮€濮� ------------------------------*/
.content-four{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-four{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.con-four img{
    width:297px;
    height: 198px;
}
.txt-four{
    position: absolute;
    left: -297px;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
    /*display: none;*/
}
.txt-four h3{
    font-weight: normal;
}
.txt-four p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 浠庡乏渚ф樉紺洪伄緗╂晥鏋� 緇撴潫------------------------------*/
/*------------- 鍥劇墖鏀懼ぇ鏁堟灉 寮€濮� ------------------------------*/
.content-five{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-five{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;

}
.conimg{
    width: 297px;
    height: 198px;
}
.txt-five{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.6);
}
.txt-five h3{
    font-weight: normal;
}
/*------------- 鍥劇墖鏀懼ぇ鏁堟灉 緇撴潫------------------------------*/
/*------------- 鍥劇墖鏀懼ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 寮€濮� ------------------------------*/
.content-six{
    width:1000px;
    height: 412px;
    margin:20px auto;
    border: 1px solid #ccc;
    padding: 15px 25px 15px 25px;
}
.con-six{
    width: 297px;
    height: 198px;
    float: left;
    margin-right: 35px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.conimg-two{
    width: 297px;
    height: 198px;
}
.txt-six{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 138px;
    padding-top: 60px;
    line-height: 45px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.2);
    display: none;
}
.txt-six h3{
    font-weight: normal;
}
.txt-six p{
    font-size: 14px;
    display: block;
    line-height: 20px;
}
/*------------- 鍥劇墖鏀懼ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 緇撴潫------------------------------*/
/*------------- 閬僵鍐呭鍖� 緇撴潫--------------------------------------*/

　　</style>
</head>

<body>
<!--從底部上升的遮罩效果  開始-->
<h2 class="content-title">一、從底部上升的遮罩效果</h2>
<div class="content">
    <ul class="contentbox">
        <li class="con">
            <img src="images/class1.jpg" alt="con1"/>
            <div class="txt">
                <h3>圖片一</h3>
                <p>內容一內容一內容一內容一內容一內容一</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class2.jpg" />
            <div class="txt">
                <h3>圖片二</h3>
                <p>內容二內容二內容二內容二內容二內容二</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class3.jpg"/>
            <div class="txt">
                <h3>圖片三</h3>
                <p>內容三內容三內容三內容三內容三內容三</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class4.jpg"/>
            <div class="txt">
                <h3>圖片四</h3>
                <p>內容四內容四內容四內容四內容四內容四</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class5.jpg"/>
            <div class="txt">
                <h3>圖片五</h3>
                <p>內容五內容五內容五內容五內容五內容五</p>
            </div>
        </li>
        <li class="con">
            <img src="images/class6.jpg"/>
            <div class="txt">
                <h3>圖片六</h3>
                <p>內容六內容六內容六內容六內容六內容六</p>
            </div>
        </li>
    </ul>
</div>
<!--從底部上升的遮罩效果  結束-->
<!--直接顯示遮罩效果  開始-->
<h2 class="content-title">二、直接顯示遮罩效果</h2>
<div class="content-two">
    <ul class="contentbox-two">
        <li class="con-two">
            <img src="images/class1.jpg"/>
            <div class="txt-two">
                <h3>圖片一</h3>
                <p>內容一內容一內容一內容一內容一內容一</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class2.jpg"/>
            <div class="txt-two">
                <h3>圖片二</h3>
                <p>內容二內容二內容二內容二內容二內容二</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class3.jpg"/>
            <div class="txt-two">
                <h3>圖片三</h3>
                <p>內容三內容三內容三內容三內容三內容三</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class4.jpg"/>
            <div class="txt-two">
                <h3>圖片四</h3>
                <p>內容四內容四內容四內容四內容四內容四</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class5.jpg"/>
            <div class="txt-two">
                <h3>圖片五</h3>
                <p>內容五內容五內容五內容五內容五內容五</p>
            </div>
        </li>
        <li class="con-two">
            <img src="images/class6.jpg"/>
            <div class="txt-two">
                <h3>圖片六</h3>
                <p>內容六內容六內容六內容六內容六內容六</p>
            </div>
        </li>
    </ul>
</div>
<!--直接顯示遮罩效果  結束-->
<!--從左上部顯示遮罩效果  開始-->
<h2 class="content-title">三、從側部顯示遮罩效果</h2>
<div class="content-three">
    <ul class="contentbox-three">
        <li class="con-three">
            <img src="images/class1.jpg"/>
            <div class="txt-three">
                <h3>圖片一</h3>
                <p>內容一內容一內容一內容一內容一內容一</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class2.jpg"/>
            <div class="txt-three">
                <h3>圖片二</h3>
                <p>內容二內容二內容二內容二內容二內容二</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class3.jpg"/>
            <div class="txt-three">
                <h3>圖片三</h3>
                <p>內容三內容三內容三內容三內容三內容三</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class4.jpg"/>
            <div class="txt-three">
                <h3>圖片四</h3>
                <p>內容四內容四內容四內容四內容四內容四</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class5.jpg"/>
            <div class="txt-three">
                <h3>圖片五</h3>
                <p>內容五內容五內容五內容五內容五內容五</p>
            </div>
        </li>
        <li class="con-three">
            <img src="images/class6.jpg"/>
            <div class="txt-three">
                <h3>圖片六</h3>
                <p>內容六內容六內容六內容六內容六內容六</p>
            </div>
        </li>
    </ul>
</div>
<!--從左上部顯示遮罩效果  結束-->
<!--從左側顯示遮罩效果  開始-->
<h2 class="content-title">四、從左側滑入顯示遮罩效果</h2>
<div class="content-four">
    <ul class="contentbox-four">
        <li class="con-four">
            <img src="images/class1.jpg"/>
            <div class="txt-four">
                <h3>圖片一</h3>
                <p>內容一內容一內容一內容一內容一內容一</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class2.jpg"/>
            <div class="txt-four">
                <h3>圖片二</h3>
                <p>內容二內容二內容二內容二內容二內容二</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class3.jpg"/>
            <div class="txt-four">
                <h3>圖片三</h3>
                <p>內容三內容三內容三內容三內容三內容三</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class4.jpg"/>
            <div class="txt-four">
                <h3>圖片四</h3>
                <p>內容四內容四內容四內容四內容四內容四</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class5.jpg"/>
            <div class="txt-four">
                <h3>圖片五</h3>
                <p>內容五內容五內容五內容五內容五內容五</p>
            </div>
        </li>
        <li class="con-four">
            <img src="images/class6.jpg"/>
            <div class="txt-four">
                <h3>圖片六</h3>
                <p>內容六內容六內容六內容六內容六內容六</p>
            </div>
        </li>
    </ul>
</div>
<!--從左側顯示遮罩效果  結束-->
<!--圖片放大效果  開始-->
<h2 class="content-title">五、鼠標滑過圖片放大效果</h2>
<div class="content-five">
    <ul class="contentbox-five">
        <li class="con-five">
            <img class="conimg" src="images/class1.jpg"/>
            <div class="txt-five">
                <h3>圖片一</h3>
                <!--<p>為您鋪就成為IT大神的在線學習之路</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class2.jpg"/>
            <div class="txt-five">
                <h3>圖片二</h3>
                <!--<p>英語、韓語、日語各類語言課程一網打盡</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class3.jpg"/>
            <div class="txt-five">
                <h3>圖片三</h3>
                <!--<p>傳授會計師、建築師等各類考證學習寶典</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class4.jpg"/>
            <div class="txt-five">
                <h3>圖片四</h3>
                <!--<p>小學、初中、高中各科課程在線輔導</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class5.jpg"/>
            <div class="txt-five">
                <h3>圖片五</h3>
                <!--<p>吉他、攝影等各類型區教程讓你成為生活達人</p>-->
            </div>
        </li>
        <li class="con-five">
            <img class="conimg" src="images/class6.jpg"/>
            <div class="txt-five">
                <h3>圖片六</h3>
                <!--<p>教你如何和寶寶一起成長</p>-->
            </div>
        </li>
    </ul>
</div>
<!--圖片放大效果  結束-->
<!--圖片放大效果伴隨蒙版文字出現  開始-->
<h2 class="content-title">六、圖片放大效果伴隨蒙版文字出現效果</h2>
<div class="content-six">
    <ul class="contentbox-six">
        <li class="con-six">
            <img class="conimg-two" src="images/class1.jpg"/>
            <div class="txt-six">
                <h3>圖片一</h3>
                <!--<p>為您鋪就成為IT大神的在線學習之路</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class2.jpg"/>
            <div class="txt-six">
                <h3>圖片二</h3>
                <!--<p>英語、韓語、日語各類語言課程一網打盡</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class3.jpg"/>
            <div class="txt-six">
                <h3>圖片三</h3>
                <!--<p>傳授會計師、建築師等各類考證學習寶典</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class4.jpg"/>
            <div class="txt-six">
                <h3>圖片四</h3>
                <!--<p>小學、初中、高中各科課程在線輔導</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class5.jpg"/>
            <div class="txt-six">
                <h3>圖片五</h3>
                <!--<p>吉他、攝影等各類型區教程讓你成為生活達人</p>-->
            </div>
        </li>
        <li class="con-six">
            <img class="conimg-two" src="images/class6.jpg"/>
            <div class="txt-six">
                <h3>圖片六</h3>
                <!--<p>教你如何和寶寶一起成長</p>-->
            </div>
        </li>
    </ul>
</div>
<!--圖片放大效果伴隨蒙版文字出現  結束-->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
　　
$(function(){
    //浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉寮€濮�
    $(".con").hover(function(){
        $(this).find(".txt").stop().animate({height:"198px"},200);
        $(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);
    },function(){
        $(this).find(".txt").stop().animate({height:"45px"},200);
        $(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
    })
    //浠庡簳閮ㄤ笂鍗囩殑閬僵鏁堟灉緇撴潫
    //鐩存帴鏄劇ず閬僵鏁堟灉寮€濮�
    $(".con-two").hover(function(){
        $(this).find(".txt-two").css("display","block");
    },function(){
        $(this).find(".txt-two").css("display","none");
    })
    //鐩存帴鏄劇ず閬僵鏁堟灉緇撴潫
    //浠庡乏涓婇儴鏄劇ず閬僵鏁堟灉 寮€濮�
    $(".con-three").hover(function() {
        $(this).find(".txt-three").stop().animate({"left": 0,"top":0});
    }, function() {
        $(this).find(".txt-three").stop().animate({"left":-297,"top":-198});
    })
    //浠庡乏涓婇儴鏄劇ず閬僵鏁堟灉 緇撴潫
    //浠庡乏渚ф樉紺洪伄緗╂晥鏋� 寮€濮�
    $(".con-four").hover(function() {
        $(this).find(".txt-four").stop().animate({"left": 0});
    }, function() {
        $(this).find(".txt-four").stop().animate({"left":-297});
    })
    //浠庡乏渚ф樉紺洪伄緗╂晥鏋� 緇撴潫
    //鍥劇墖鏀懼ぇ鏁堟灉 寮€濮�
    $(".con-five").hover(function() {
        $(this).find(".conimg").stop().animate({"width":310,"height":210});
    }, function() {
        $(this).find(".conimg").stop().animate({"width":297,"height":198});
    })
    //鍥劇墖鏀懼ぇ鏁堟灉 緇撴潫
    //鍥劇墖鏀懼ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 寮€濮�
    $(".con-six").hover(function() {
        $(this).find(".conimg-two").stop().animate({"width":310,"height":210});
        $(this).find(".txt-six").css("display","block");
    }, function() {
        $(this).find(".conimg-two").stop().animate({"width":297,"height":198});
        $(this).find(".txt-six").css("display","none");
    })
    //鍥劇墖鏀懼ぇ鏁堟灉浼撮殢钂欑増鏂囧瓧鍑虹幇 緇撴潫
});

</script>
</body>
</html>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 css如何實現鼠標移至圖片上顯示遮罩層及文字 Android 遮罩層效果 JS——層的遮罩效果 要求:鼠標移入顯示提示信息框；鼠標離開,信息框消失，消失的效果延遲 js 遮罩層 loading 效果 css實現鼠標移入圖片放大效果 jQuery css3鼠標懸停圖片顯示遮罩層動畫特效 jquery 遮罩層顯示img 鼠標移入標題，標題文字全部顯示 遮罩層鏤空效果的多種實現方法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM