Помощ с jQuery (Hover Image)

Acho

Registered
Имам следния javascript:

Код:
       <script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-84px', 
			marginLeft: '-77px', 
			top: '100%', 
			left: '50%', 
			width: '200px', 
			height: '160px',
			border: '12px solid #1b150e',
			padding: '0px' 
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '100px', 
			height: '80px', 
			border: '1px solid #ddd',
			padding: '5px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumb li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});
 
});
</script>

А ето така принтвам картинките:

Код:
 <ul class="thumb">
	<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>	
	<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
	<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
</ul>
Искам при hover на картинката някъде да вмъкна един-два реда малки букви текст. Как мога да го постигна? Мерси предварително. :)

П.П. Ако нещо не ви е ясно, питайте. :)
 
Незнам дали съм те разбрал точно но може би имаш предвид това!

<ul class="thumb">
<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" title="Пример:Very cool picture! It is really nice!"/></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
</ul>
 
memphisa каза:
Незнам дали съм те разбрал точно но може би имаш предвид това!

<ul class="thumb">
<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" title="Пример:Very cool picture! It is really nice!"/></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i4.ytimg.com/vi/wuupiqdhVAo/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/8jkycmFhz_c/hqdefault.jpg" alt="" /></a></li>
<li><a href="#"><img src="http://i1.ytimg.com/vi/4BS8Qbd9P6s/hqdefault.jpg" alt="" /></a></li>
</ul>

Това ми е ясно как става, да.

Ето да визуализирам нещата. В резултат на горните 2 кода се получава горе долу следното:

16776901.jpg


Това е картинката при hover (уголемява се). Там, където сочи синята стрелка искам да сложа текст, въпросът е как? Слаб съм още с JS, може и да е просто, дано да се намери някой да помогне.

:)
 

Back
Горе