…ここからが続き

使い方や画像サイズによって変更する点など

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
	$(document).ready(function(){
		//マスオーバー時にキャンプション表示
		$('.boxgrid.captionfull').hover(function(){
			$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
		}, function() {
			$(".cover", this).stop().animate({top:'350px'},{queue:false,duration:160});
		});
		//マウスオーバー時に残りを表示
		$('.boxgrid.caption').hover(function(){
			$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
		}, function() {
			$(".cover", this).stop().animate({top:'265px'},{queue:false,duration:160});
		});
		//マスオーバー時に右にスライド
		$('.boxgrid.slideright').hover(function(){
			$(".cover", this).stop().animate({left:'450px'},{queue:false,duration:300});
		}, function() {
			$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
		});	
		//マスオーバー時に右下にスライド
		$('.boxgrid.thecombo').hover(function(){
			$(".cover", this).stop().animate({top:'300px', left:'450px'},{queue:false,duration:300});
		}, function() {
			$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
		});
		//マスオーバー時に上にスライド
		$('.boxgrid.slidedown').hover(function(){
			$(".cover", this).stop().animate({top:'-300px'},{queue:false,duration:300});
		}, function() {
			$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
		});
		//マスオーバー時に他の画像も表示
		$('.boxgrid.peek').hover(function(){
			$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
		}, function() {
			$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
		});
	});
</script>

今回はすべての要素記述していますが、実際に使いたい要素の部分だけを記述してもらえれば大丈夫です。

top や left に記述されている数値を変更する事でマウスオーバー時に移動する位置を変更出来ます。

CSS

h3	{
	font-size: 116.6%;
	margin: 10px 10px 5px 10px;
	color:#FFF;
}
.boxgrid	{ 
	width: 450px; 
	background: #161613; 
	height: 300px;
	margin-bottom: 20px; 
	border: solid 5px #555; 
	overflow: hidden; 
	position: relative;
}
.boxgrid img{ 
	position: absolute; 
	top: 0; 
	left: 0;
}
.boxgrid p{ 
	padding: 0 10px; 
	color: #afafaf; 
	font-weight:bold; 
}
	
.boxcaption{ 
	float: left; 
	position: absolute; 
	background: #000; 
	height: 100px; 
	width: 100%; 
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
	top: 300px;
	left: 0;
}
.caption .boxcaption {
	top: 265px;
	left: 0;
}

サイズ変更をする際.boxgridのサイズやbackgroundやborderなどを変更して下さい。