ここではマウスオーバーで画像にキャプションを表示するプラグインmosaicを紹介しています。
ダウンロードはこちら
http://buildinternet.com/project/mosaic/
デモはこちら
https://office-goto.info/demo/mosaic/
読み込むファイル
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
Circleの場合の読み込み
css
<style type="text/css">
.mosaic-block {
float:left;
position:relative;
overflow:hidden;
width:400px;
height:250px;
margin:10px;
background:#111 url(img/progress.gif) no-repeat center center;
border:1px solid #fff;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.mosaic-backdrop {
display:none;
position:absolute;
top:0;
height:100%;
width:100%;
background:#111;
}
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:100%;
height:100%;
background:#111;
}
.circle .mosaic-overlay {
background:url(img/hover-magnify.png) no-repeat center center;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
display:none;
}
</style>
js
<script type="text/javascript">
$(function(){
$('.circle').mosaic({
opacity : 0.8 // オーバーレイ用不透明 (0-1)
});
});
</script>
html
<!--Circle-->
<div class="mosaic-block circle">
<a href="http://buildinternet.com/project/mosaic" class="mosaic-overlay"> </a>
<div class="mosaic-backdrop"><img src="img/mosaic.jpg"/></div>
</div>
他にFade、Bar、Bar2、Bar3、Cover、Cover2、Cover3があるので必要な箇所を読み込んでください。