キャプションをかっこよく効果的に/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

画像エフェクト(加工)jquery-1.3.2.min.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style type="text/css"> 
		
			*{ padding:0px; margin:0px; }
			a{ color:#C8DCE5;}
			h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }
			
			.boxgrid{ 
				width: 325px; 
				height: 260px; 
				margin-right:5px; 
				float:left; 
				background:#161613; 
				border: solid 2px #8399AF; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 0 10px; 
					color:#afafaf; 
					font-weight:bold; 
					font:10pt "Lucida Grande", Arial, sans-serif; 
				}
				
			.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: 260px;
 					left: 0px;
 				}
 				.caption .boxcaption {
 					top: 220;
 					left: 0;
 				}
				
			h3 a{}
				
		</style> 
		
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
		<script type="text/javascript"> 
			$(document).ready(function(){
				//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
				//Vertical Sliding
				$('.boxgrid.slidedown').hover(function(){
					$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
				});
				//Horizontal Sliding
				$('.boxgrid.slideright').hover(function(){
					$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
				});
				//Diagnal Sliding
				$('.boxgrid.thecombo').hover(function(){
					$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
				}, function() {
					$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
				});
				//Partial Sliding (Only show some of background)
				$('.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});
				});
				//Full Caption Sliding (Hidden to Visible)
				$('.boxgrid.captionfull').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
				});
				//Caption Sliding (Partially Hidden to Visible)
				$('.boxgrid.caption').hover(function(){
					$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
				}, function() {
					$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
				});
			});
		</script> 
</head>

<body>
<div style="height:300px; width:700px">
<div class="boxgrid captionfull"> 
	<img src="2step.jpg"/> 
	<div class="cover boxcaption"> 
		<h3>2StepCSS.com</h3> 
		<p>リアルタイムに練習できる、CSS練習講座。<br/><a href="http://www.2step-css.com/" target="_BLANK">Go to Site</a></p> 
	</div>		
</div> 
					
<div class="boxgrid slideright"> 
	<img class="cover" src="ill.jpg"/> 
	<h3>イラスト</h3> 
	<p>特になし</p> 
</div> 
</div>
</body>
</html>

	Sliding Boxes and Captions with jQuery

画像のキャプションをスライドさせながら効果的に表示するスクリプトです。
画像自体をスライドさせて、裏に隠れているキャプションなどのデータを表示したり、
キャプションをスライドさせて、画像の上に表示することが可能。
スライドの方向はJavascriptからCSSのtop,leftで指定しているため、縦横斜めと設定できます。
jqueryフレームワークを使用。

チュートリアル

ダウンロード/セッティング

まずjqueryをダウンロードしてきてください。
それをアップしたら、<head>内に読みこませます。

次に製作元のサイトを開き、必要なCSSと動作設定用のJavascriptを<head>内にコピーします。

CSS　・・・　サンプルのコードの<head>参照

javascript　・・・　サンプルのコードの<head>参照

javascriptについてですが、

//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});　

これで一つの動作を指定しています。
画像やキャプションの初期位置は、CSSで指定し、javascriptではhover時の設定、マウスアウト時の設定をしています。
上記のコードで言うと、top:'-260px'の行がhover、top:'0px'の行がマウスアウトの設定です。
ここにtopだけでなくleftを加えると、横方向へのスライドも可能になります。
その場合は、top:'-260px', left:'325px'のように、間に「 , 」を入れてください。

HTMLの設定

先に設定したjavascript部分の .boxgrid.slidedown の箇所がターゲットに付加するセレクタです。
なので

<div class="boxgrid captionfull">
   <img src="2step.jpg"/>

   <div class="cover boxcaption">
   <h3>2StepCSS.com</h3>
   <p>リアルタイムに練習できる、CSS練習講座。<br/><a href="http://www.2step-css.com/" target="_BLANK">Go to Site</a></p>
   </div>
</div>　

のようにマークアップします。
ここでポイントとなるのは<img>を<div>内の先頭に持ってきて、他のタグでマークアップしていないところでしょうか。
この例だと boxcaption部分がアニメーションして画像に重なるようになります。

topとleftで調整すればもっと色々な方向に調整できるので、お試し下さい。