Buna benzer tasarımlar hazırlamak için bir eklentiye ne kadar ihtiyaç duyulur tartışılır gibi. Sonuçta sadece Css kullanarak bile bundan daha iyi tasarımlar yapılabilir. Yine de bazı arkadaşların işine yarayabilir düşüncesi ile paylaşmak istedim sizlerle. Birçok web sitesinde kullanan, en çok tercih edilen ve genellikle de resim galeri veya portfolyo sayfalarında kullanılan bir özelliktir. Mouse resimlerin üzerine geldiğinde resimlerin açıklamaları alt kısımdan yukarıya doğru kayar ve ziyaretçiler açıklamaları görürler. Hem sitedeki fotoğrafları daha iyi ve engel olmadan incelemek açısından da oldukça mantıklı bir yöntemdir. Washington Botelho‘nun yapmış olduğu Capty.js için eklediğim caption plugin kelimesinin anlamış başlık eklentisi demek oluyor.

Kullanım 

• Head  etiketleri arasına eklenecek olan bölümler.

Js dosya adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.capty.min.js"></script>

Stil : 

<style type="text/css">
@CHARSET "UTF-8";

div.capty-caption {
	background-color: #000;
	color: #FFF;
	font: bold 11px verdana;
	padding-left: 10px;
	padding-top: 7px;
	text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
	color: #318DAD;
	font: bold 11px verdana;
	text-decoration: none;
	text-shadow: none;
}
</style>

JavaScript :

	<script type="text/javascript">
		$(function() {
			$('#content').capty({
				height:		70,
				opacity:	.6
			});
		});
	</script>

• Body  etiketleri arasına eklenecek olan bölüm.

Html :

<img id="content" src="img/image.jpg" alt="" name="#content-target" width="500" height="400"/>
<div id="content-target">
<font size="4"><b><span style="color: #F00;">jQuery Plugin</span> - &#x0130;stanbul Bo&#x011F;az&#x0131; - T&uuml;rkiye<br/>						 
<a href="javascript:void(0);">https://www.mintik.com</a></b></font></div>
</div>