title: Create a CSS only Popup, with fade and effect
body: <p>I want to create a CSS based popup (CSS3 Allowed) without any JavaScript, with a fade transition and scale effect. Something similar to IceCream Sandwitch and <strong>JellyBean</strong> popup messages.  </p>
  
  <p>I have tried the following:<br>
  <a href="http://jsfiddle.net/OMS_/7UaK4/5/" rel="nofollow">http://jsfiddle.net/OMS_/7UaK4/5/</a></p>
  
  <p>Main Parts of Code:  </p>
  
  <p><strong>HTML</strong>  </p>
  
  <pre><code>&lt;span class="info"&gt; Info &lt;/span&gt;
  &lt;div class="message"&gt;
      &lt;p&gt;
          Content
      &lt;/p&gt;
  &lt;/div&gt;​  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.message {
      position: absolute;
      top: 100px;
      left: 0;
      width: 100%;
      text-align: center;
      opacity: 0;
      -webkit-transform: scale(.9, .9);
      -webkit-transition: all .18s ease-in-out;
  }
  .info:hover + .message {
      opacity: 1;
      -webkit-transform: scale(1, 1);
  }
  </code></pre>
  
  <p>What I am doing is setting the <code>opacity</code> of the element to <code>0</code>, and on <code>hover</code> of a sibling DOM element, transtion it to <code>1</code>.<br>
  How do I position it in center, both vertically and horizontally?<br>
  Also, is this the proper way to make a CSS3 popup?<br>
  Can I transition from <code>display: none</code> to <code>display: block</code> ?</p>
  
  <p>Thanks</p>