title: DIV and CSS: Floating box inside semi transparent div
body: <p>I am creating this in a visualforce page but due to stackexchange policy I need to post web development questions here. </p>
  
  <p>I have the following HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="position: absolute;  top: 0; left: 0; right: 0; bottom: 0;  opacity: 0.75; z-index: 1000; background-color: gray;"&gt;
    &amp;nbsp;
  &lt;/div&gt;
  &lt;div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;"&gt;
    &lt;h&gt;Transferring Records...&lt;/h&gt;&lt;br /&gt;
    &lt;img src="/img/loading32.gif"/&gt;&lt;br /&gt;
    &lt;h&gt;This may take a minute or two...&lt;/h&gt;&lt;br /&gt;
  &lt;/div &gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Which generates a full screen gray overlay and then my text and image in the center. </p>
  
  <p>What I am trying to do is create a smaller white box around my text as well so it is easier to read. Can anyone help me with that? </p>
  
  <p>Here is a screenshot of current setup:</p>
  
  <p><img src="https://i.stack.imgur.com/79gta.jpg" alt="Screenshot"></p>