jCapSlide 浮動於圖片的透明圖層

jCapSlide 能夠建立一個覆蓋在圖片之上的透明圖層，當滑鼠滑過之後才顯示出全部資訊，並不會把圖片本身全部都蓋住。還可以設定圖層的顏色、背景、框線和剛開始是否顯示圖層的設定。基於 jQuery 框架開發，美觀有實用的一個套件程式。
使用方法：
第一步 載入程式需要使用的 JavaScript 檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//jCapSlide 的主程式碼
<script src="jquery.capSlide.js" type="text/javascript"></script>


第二步 寫入 HTML 圖片的位置
<div class="content">
  <div class="demo">
    <div id="capslide_img_cont6" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont7" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont8" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont9" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont10" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
  <div style="clear:both;"></div>
    <div id="capslide_img_cont" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont2" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont3" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont4" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont5" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont11" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont12" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
    <div id="capslide_img_cont13" class="ic_container">
        <img src="圖片連結" width="180" height="240" alt=""/>
        <div class="overlay" style="display:none;"></div>
        <div class="ic_caption">
            <p class="ic_category">標題</p>
            <h3>文字標題</h3>
            <p class="ic_text">文字內容</p>
        </div>
    </div>
  </div>
</div>

第三步 幫圖片寫入CSS樣式內容
.ic_container{
    vertical-align:baseline;
    margin:10px;
    position:relative;
    /*-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    -moz-box-shadow: 0 1px 3px #888;
    -webkit-box-shadow: 0 1px 3px #888;*/
}
.overlay{
    opacity:0.3;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
.ic_caption{
    position:absolute;  
    opacity:0.6;
    overflow:hidden;
    margin:0px;
    padding:0px;
    left:0px;
    right:0px;
    cursor:default;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.ic_category{
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:3px;
    padding:5px;
    margin:0px;
}
.ic_caption h3{
    padding:0px 5px 5px 5px;
    margin:0px;
    font-size:18px;
}
.ic_text{
    padding:5px;
    margin:0px;
    text-align:justify;
    font-size:11px;
}

.demo{
     float:left;
}

第四步 撰寫 JavaScript 的程式片段
$(function() {
    $("#capslide_img_cont").capslide({
        caption_color : 'white',          // 標題文字顏色
        caption_bgcolor : 'black', //  背景文字顏色
        overlay_bgcolor : 'black',        // 半透明圖層的顏色
        border : '',          // 邊框的大小
        showcaption    : false          // 初始化是否顯示部分標題
    });
    $("#capslide_img_cont2").capslide({
        caption_color : 'black',
        caption_bgcolor : '#E6E79C',
        overlay_bgcolor : '#E6E79C',
        border : '',
        showcaption    : true
    });
    $("#capslide_img_cont3").capslide({
        caption_color : '#fff',
        caption_bgcolor : '#000',
        overlay_bgcolor : 'blue',
        border : '',
        showcaption    : true
    });
    $("#capslide_img_cont4").capslide({
        caption_color : 'black',
        caption_bgcolor : '#f68a21',
        overlay_bgcolor : '#f68a21',
        border : '',
        showcaption    : false
    });
    $("#capslide_img_cont5").capslide({
        caption_color : 'black',
        caption_bgcolor : 'white',
        overlay_bgcolor : '#CE9B9B',
        border : '4px solid #CE9B9B',
        showcaption    : true
    });
    $("#capslide_img_cont6").capslide({
        caption_color : 'black',
        caption_bgcolor : 'white',
        overlay_bgcolor : '#832EA5',
        border : '10px solid #ccc',
        showcaption    : true
    });
    $("#capslide_img_cont7").capslide({
        caption_color : '#fff',
        caption_bgcolor : '#549360',
        overlay_bgcolor : '#549360',
        border : '10px solid #549360',
        showcaption    : true
    });
    $("#capslide_img_cont8").capslide({
        caption_color : '#fff',
        caption_bgcolor : '#d13f68',
        overlay_bgcolor : '#d13f68',
        border : '10px solid #d13f68',
        showcaption    : true
    });
    $("#capslide_img_cont9").capslide({
        caption_color : '#660e3a',
        caption_bgcolor : '#3fa6d1',
        overlay_bgcolor : '#3fa6d1',
        border : '10px solid #3fa6d1',
        showcaption    : true
    });
    $("#capslide_img_cont10").capslide({
        caption_color : '#fff',
        caption_bgcolor : '#549360',
        overlay_bgcolor : '#549360',
        border : '10px solid #549360',
        showcaption    : true
    });
    $("#capslide_img_cont11").capslide({
        caption_color : '#fff',
        caption_bgcolor : '#000',
        overlay_bgcolor : '#f9ca8d',
        border : '4px solid #000',
        showcaption    : true
    });
    $("#capslide_img_cont12").capslide({
        caption_color : '#bfedfa',
        caption_bgcolor : '#000',
        overlay_bgcolor : '#000',
        border : '4px solid #444',
        showcaption    : false
    });
    $("#capslide_img_cont13").capslide({
        caption_color : '#000',
        caption_bgcolor : '#efa609',
        overlay_bgcolor : '#efa609',
        border : '4px solid #ccc',
        showcaption    : true
    });
});

作者網站：http://tympanus.net/jCapSlide/
檔案大小：386 KB(包含範例)
檔案下載：http://tympanus.net/jCapSlide/jCapSlide.zip
檔案備份：下載