title: How to change text after delay and loop it back?
body: <p>I am trying this "Text in Transparent Box" using CSS.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div.background
  {
    width: 500px;
    height: 250px;
    background: url(image.jpg) repeat;
    border: 2px solid black;
  }
  div.transbox
  {
    width: 400px;
    height: 30px;
    margin: 30px 50px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
  }
  div.transbox p
  {
    text-align:center;
    margin: 4px 0px;
    font-weight: bold;
    color: #000000;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;div class="background" style="display:inline-block"&gt;
  &lt;div class="transbox" style="display:inline-block"&gt;
  &lt;p&gt;This is my first position&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How do I automatically change position of transparent box and text after 5secs delay and again and then loop it allover again?
  Check this screenshot image:</p>
  
  <pre><code>Image 1 for position1 :http://i57.tinypic.com/x3detu.jpg
  
  Image 2 for position 2:http://i60.tinypic.com/ipnw5v.png
  
  Image 3 for position 3:http://i58.tinypic.com/2lnff3t.png
  
  Loop this back to Position1
  </code></pre>
  
  <h1><strong>EDIT</strong></h1>
  
  <p>Code added as you advised, but it doesn't work::</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  div.background
  {
    width: 500px;
    height: 250px;
    background: url(banner.jpg) no-repeat;
    border: 2px solid black;
  }
  div.transbox
  {
    width: 400px;
    height: 30px;
    margin: 30px 50px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
  }
  div.transbox p
  {
    text-align:center;
    margin: 4px 0px;
    font-weight: bold;
    color: #000000;
  }
  &lt;/style&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
      (function($) {
          var transbox = $('div.transbox');
  
          (function runIt() {
              transbox
              .delay(1500).animate({"top": "70px"}, 1000)
              .delay(500).animate({"top": "160px"}, 1000)
              .delay(500).animate({"top": ""}, 200, function () {runIt();});
          }());
      }());
  &lt;/script&gt;
  
  
  &lt;div class="background" style="display:inline-block"&gt;
  &lt;div class="transbox" style="display:inline-block"&gt;
  &lt;p&gt;This is my first position&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>