マウスオーバーでエフェクトをかけてくれるjQueryプラグイン「Mosaic.js」

いくつかのキャプション画像を並べたページなどで、画像にマウスオーバーするとその説明やリンクテキストなどを動きをつけて表示してくれる「Mosaic.js」を使ってみました。

1.Mosaic!より「mosaic.js」をダウンロード

Mosaic – Sliding Boxes and Captions jQuery Plugin

2.JavaScriptとCSSを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/mosaic.1.0.1.js"></script>
<link rel="stylesheet" href="css/mosaic.css" type="text/css" media="screen" />

3.JavaScriptを記述

<script type="text/javascript">  
	jQuery(function($){
		$('.circle').mosaic({
			opacity:0.8//Opacity for overlay (0-1)
		});

		$('.fade').mosaic();

		$('.bar').mosaic({
			animation:'slide'//fade or slide
		});

		$('.bar2').mosaic({
			animation:'slide'//fade or slide
		});

		$('.bar3').mosaic({
			animation:'slide',//fade or slide
		anchor_y:'top'//Vertical anchor position
		});

		$('.cover').mosaic({
			animation:'slide',//fade or slide
		hover_x:'400px'//Horizontal position on hover
		});

		$('.cover2').mosaic({
			animation:'slide',//fade or slide
			anchor_y:'top',//Vertical anchor position
			hover_y:'80px'//Vertical position on hover
		});

		$('.cover3').mosaic({
			animation:'slide',//fade or slide
			hover_x:'400px',//Horizontal position on hover
			hover_y:'300px'//Vertical position on hover
		});
	});
</script>

jQuery(function($){

$('.circle').mosaic({

opacity:0.8//Opacity for overlay (0-1)

});

$('.fade').mosaic();

$('.bar').mosaic({

animation:'slide'//fade or slide

});

$('.bar2').mosaic({

animation:'slide'//fade or slide

});

$('.bar3').mosaic({

animation:'slide',//fade or slide

anchor_y:'top'//Vertical anchor position

});

$('.cover').mosaic({

animation:'slide',//fade or slide

hover_x:'400px'//Horizontal position on hover

});

$('.cover2').mosaic({

animation:'slide',//fade or slide

anchor_y:'top',//Vertical anchor position

hover_y:'80px'//Vertical position on hover

});

$('.cover3').mosaic({

animation:'slide',//fade or slide

hover_x:'400px',//Horizontal position on hover

hover_y:'300px'//Vertical position on hover

});

</script>

4.HTMLを記述

<div id="content">

<!--Circle-->
<div class="mosaic-block circle">
	<a href="#" class="mosaic-overlay">&nbsp;</a>
	<div class="mosaic-backdrop"><img src="images/img1.jpg" width="100%"/></div>
</div>

<!--Fade-->
<div class="mosaic-block fade">
	<a href="#" class="mosaic-overlay">
		<div class="details">
			<h4>2000 春</h4>
			<p>Photo By カメラマンA</p>
		</div>
	</a>
	<div class="mosaic-backdrop"><img src="images/img2.jpg" width="100%"/></div>
</div>

<!--Bar-->
<div class="mosaic-block bar">
	<a href="#" target="_blank" class="mosaic-overlay">
		<div class="details">
			<h4>2001 春</h4>
			<p>Photo By カメラマンB</p>
		</div>
	</a>
	<div class="mosaic-backdrop"><img src="images/img3.jpg" width="100%"/></div>
</div>

<!--Bar 2-->
<div class="mosaic-block bar2">
	<a href="#" target="_blank" class="mosaic-overlay">
		<div class="details">
			<h4>2003 春</h4><br/>
			<p>Photo By カメラマンC</p>
		</div>
	</a>
	<div class="mosaic-backdrop"><img src="images/img4.jpg" width="100%"/></div>
</div>

<!--Bar 3-->
<div class="mosaic-block bar3">
	<a href="#" target="_blank" class="mosaic-overlay">
		<div class="details">
			<h4>2004 春</h4>
			<p>Photo By カメラマンD</p>
		</div>
	</a>
	<a href="http://www.nonsensesociety.com/2010/12/i-am-not-human-portraits/" target="_blank" class="mosaic-backdrop"><img src="images/img5.jpg" width="100%"/></a>
</div>

<!--Cover-->
<div class="mosaic-block cover">
	<div class="mosaic-overlay"><img src="images/img6.jpg" width="100%"/></div>
	<a href="#" target="_blank" class="mosaic-backdrop">
		<div class="details">
			<h4>2005 春</h4>
			<p>Photo By カメラマンE</p>
		</div>
	</a>
</div>

<!--Cover 2-->
<div class="mosaic-block cover2">
	<a href="#" target="_blank" class="mosaic-overlay"><img src="images/img7.jpg" width="100%"/></a>
	<a href="#" target="_blank" class="mosaic-backdrop">
		<div class="details">
			<h4>2006 春</h4>
			<p>Photo By カメラマンF</p>
		</div>
	</a>
</div>

<!--Cover 3-->
<div class="mosaic-block cover3">
	<div class="mosaic-overlay"><img src="images/img8.jpg" width="100%"/></div>
	<a href="#" target="_blank" class="mosaic-backdrop">
		<div class="details">
			<h4>2007 春</h4>
			<p>Photo By カメラマンG</p>
		</div>
	</a>
</div>

<div class="clearfix"></div>
</div>

</div>

<p>Photo By カメラマンA</p>

</div>

</a>

</div>

<p>Photo By カメラマンB</p>

</div>

</a>

</div>

<p>Photo By カメラマンC</p>

</div>

</a>

</div>

<p>Photo By カメラマンD</p>

</div>

</a>

</div>

<p>Photo By カメラマンE</p>

</div>

</a>

</div>

<p>Photo By カメラマンF</p>

</div>

</a>

</div>

<p>Photo By カメラマンG</p>

</div>

</a>

</div>

</div>

以上になります。