Title over Image center

by yeyene

HTML

<div class="img-container">
  <img src="http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg" alt="a" width="100%" height="200" />   
  <p class="imgTitle">Pure Waves</p>  
</div>

<div class="img-container">
    <img src="http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg" alt="b" width="100%" height="200" /> 
    <p class="imgTitle">Sports Bottles</p>  
</div>

<div class="img-container">
  <img src="img/purple.gif" alt="c" width="100%" height="200" />
</div>

<div class="img-container">
  <img src="img/lightpurple.gif" alt="a" width="100%" height="200" />
</div>

<div class="img-container">
  <img src="img/lightred.gif" alt="a" width="100%" height="200" />
</div>

<div class="img-container">
  <img src="img/darkred.gif" alt="a" width="100%" height="200" />
</div>

<div class="img-container">
  <img src="img/darkgrey.gif" alt="a" width="100%" height="200" />
</div>

<div class="img-container">
  <img src="img/lightgrey.gif" alt="a" width="100%" height="200" />
</div>

CSS

@font-face
{

font-family: 'Open Sans', sans-serif;
src: <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>;
}


/*section {
  position: absolute;
  left: 50%;
  top: 40%;
  margin: -118px -180px;
  width: 500px;
  min-height: 2000px;
  font-size: 35px;
  text-align: center;
}

*/





.img-container {
  display: block;
  position: relative;
  float: inline;
  margin: 0px;
  width: 100%;
  height: 200px;
  background: #e0e0e0;
}
.imgTitle {
	position: absolute;
	color: black;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 2px !important;
	font-size: 13px  !important;
    z-index:10;
}

JavaScript

$(document).ready(function() {
	$('.img-container').each(function() {
		// Get a reference to the image.    
		var img = $(this).find('img');
		var p = $(this).find('.imgTitle');
		
		// center the title
		$(this).children('p.imgTitle').css({
		   'top':((img.height() - p.height())/2) - 13,
		   'left':(img.width() - p.width())/2
		});
		
		// Hide by default.
		img.hide();
		
		$(this).hover(function() {
			img.stop().fadeIn(50);
		}, function() {
			img.stop().fadeOut(1300);
		});
	
	});
});