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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div id="titleBanner">
    <div class="img-caption">	<em class="logo fa fa-angle-double-right"></em>

         <h1>Metro<span>Subpage</span> Logo</h1>

    </div>
    <img src="http://stage.capmetro.org/uploadedImages/Capmetroorg/CMTA-brand/metro-subpage-title-banner-MOCKUP.jpg" alt="MetroWorks" title="MetroWorks" />
</div>


<div class="bs-docs-section">
  <h1 id="buttons" class="page-header">Buttons</h1>

  <h2 id="buttons-options">Options</h2>
  <p>Use any of the available button classes to quickly create a styled button.</p>
  <div class="zero-clipboard"><span class="btn-clipboard with-example">Copy</span></div><div class="bs-example">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  </div>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- Standard button --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-default"</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/button&gt;</span>

<span class="c">&lt;!-- Provides extra visual weight and identifies the primary action in a set of buttons --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn...

CSS

@import url(http://fonts.googleapis.com/css?family=Cabin:400, 500, 600, 700, 400italic, 500italic, 600italic, 700italic|Cabin+Condensed:400, 500, 600, 700);
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400, 700);
 #titleBanner {
    position:relative;
    width:800px;
    height:150px;
    left: 0px;
}
.img-caption {
    position:absolute;
    left:0px;
    width:215px;
    height:150px;
    text-align:center;
}
.img-caption em.logo {
    display: inline-block;
    width: 84px;
    height: 84px;
    background: #0069aa;
    border-radius: 44px;
    font-size: 84px;
    color: #fff;
    margin-top:5px;
    
}
.img-caption h1 {
    line-height:1.1;
    display:inline-block;;
    font-size:24px;
    font-family:'Cabin', sans-serif;
    text-align: center;
    margin:5px 0 0 0;
    color:#0069aa;
}
.img-caption h1 span {
    color:#fdbb30;
}