Overlaying div across jumbotron

I'm a complete noob with programming. I am working on a project and I can't figure out the last piece. I am using bootstrap to create a jumbotron and I want to create an overlay with text information. Below is my code.

Thanks.

<div class="jumbotron" style="background-color: white;" >
    <img class="img-responsive"  src="images/sanDiegFallback.png"> 
        <div class="overlay">
            <h1>ReCon 2015</h1>
                    <div class="fadeInDown">
                        <p>October 14-16, 2015</p>
                    </div>
                    <div class="fadeInDown2">
                      <p>Marriott Marquis<br />San Diego, CA</p>
                    </div>
                    <div class="fadeInDown3">
                     <p>Registration open now<br />
                        <span style="font-size: 14px; line-height: 18px;">(Watch your inbox for details)</span>
                    </div>
                    <div class="fadeInDown4">
                     <a class="cta" href="https://twitter.com/intent/tweet?text=Save+the+date+for+%23ReCON2015+in+San+Diego%3A+October+14-15+http://is.gd/FkQv3k+%40SVISanDiego" style="background-color:none;
                background-image: src(images/twitter_bg.png);
                border:2px solid #ffffff;
                border-radius:25px;
                color:#ffffff;
                display:inline-block;
                font-family: 'proxima_nova_rgregular', Helvetica, Arial, sans-serif;
                font-size:18px;
                line-height: 18px;
                text-decoration:none;
                padding: 15px 35px;
                text-indent: 20px;
                " target="_blank">Share on Twitter</a>
                    </div>
    </div>
</div>