jQuery: Display title atr over image banner

Image banner will display page title using the title attribute - a must for screen readers

by freedawirl

HTML

<div id="titleBanner">
	<em class="logo fa-angle-double-right"></em>
     
      <img src="http://stage.capmetro.org/uploadedImages/Capmetroorg/CMTA-brand/metro-subpage-title-banner-MOCKUP.jpg" alt="" title="MetroWorks"><h1 class="img-caption logo generic" style="position: absolute; top: 90px; left: 0px; width: 225px;"><em>Metro<span>Works<span></em></h1>
 
     
     
     </div>

CSS

@charset "UTF-8";
/* CSS Document */

/* styles not specific to demo */
body, ul, li, div, img {
	margin:0;
	padding:0;
}
a.back-link {
	color:#2C2C2C;
	text-decoration:none;
	display:inline-block;
	margin:10px 15px 0 0;
	font: 13px/1.5em Verdana,Geneva,sans-serif;
	float:right;
}
a.back-link:hover {
	color:#DE1B1B;
}
/* end styles not specific to demo */
@import url(http://fonts.googleapis.com/css?family=Cabin:400,500,600,700,400italic,500italic,600italic,700italic|Cabin+Condensed:400,500,600,700);
#titleBanner {
	position:relative;
	width:800px;
    left: -10px;
	
}
#titleBanner em.logo{ display: block;
position: absolute;
width: 84px;
height: 84px;
background: #0069aa;
top: 11px;
left: 62px;
border-radius: 44px;}
#titleBanner img:first-child {
	margin-bottom:10px;
}
#titleBanner h1.img-caption {
    font-size:10px;
	line-height:1.25;
}
#titleBanner h1.img-caption em {
    font-style:normal;
    display:block;
	padding-left:5px;
	font-size:24px;
	font-family:'Cabin Condensed', sans-serif;
    text-align: center;
}
#titleBanner h1.img-caption em span{color:red;}

JavaScript

// display image caption on top of image
$("#titleBanner img").each(function() {
var imageCaption = $(this).attr("alt");
 
if (imageCaption != '') {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
var position = $(this).position();
var positionTop = (position.top + imgHeight - 26)
$("<h1 class='img-caption'><em>"+imageCaption+"</em></h1>")
.css({"position":"absolute", "top":positionTop+"px", "left":"10", "width":imgWidth +"px"})
.insertAfter(this);
}
 
});