E-riverstyle Vanguard

Quenessより、jQueryで作る画像に画像タイトルと説明文を滑らかなスライドイン効果をだすスクリプトの紹介です。

デモページはこちらから

下記がマークアップ例です。

HTML

<div class="photo">
	<div class="heading"><span>Pier</span></div>
	<img src="images/pier1.jpg" width="300" height="186" alt="" />
	<div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div>
</div>

CSS

.photo {
/* relative position, so that objects in it can be positioned inside this container */
	position:relative;
	font-family:arial;	
	
/* hide those extra height that goes beyong the size of this container */
	overflow:hidden;
	border:5px solid #000;
	width:300px;
	height:186px;
}	

.photo .heading, .photo .caption {
	/* position inside the container */
	position:absolute;
	background:#000;
	height:50px;
	width:300px;

/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
	opacity:0.6;
	filter:alpha(opacity=60);  
	-moz-opacity:0.6;    
	-khtml-opacity: 0.6;  
}

.photo .heading { 
/* hide it with negative value */
/* it's the height of heading class */
	top:-50px;
}
.photo .caption { 		
/* hide it with negative value */
/* it's the height of bottom class */
	bottom:-50px;		
}
/* styling of the classes*/
.photo .heading span {
	color:#26c3e5;	
	top:-50px;
	font-weight:bold;
	display:block;
	padding:5px 0 0 10px;
}

.photo .caption span{
	color:#999;	
	font-size:9px;
	display:block;
	padding:5px 10px 0 10px;
}

jQuery

$(document).ready(function () {
// transition effect
	style = 'easeOutQuart';
// if the mouse hover the image
	$('.photo').hover(
	function() {
	//display heading and caption
		$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
		$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
	},

function() {
//hide heading and caption
	$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
	$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
		}
	);

});

マークアップを変えれば、アクセシブルなコンテンツになりますね、使う場合はそのことも踏まえてやると良いですね。