ここではマウスオーバーで画像にキャプションを表示するプラグイン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">&nbsp;</a>
    <div class="mosaic-backdrop"><img src="img/mosaic.jpg"/></div>
</div>

他にFade、Bar、Bar2、Bar3、Cover、Cover2、Cover3があるので必要な箇所を読み込んでください。