title: Text transform from behind the box
body: <p>I have a div element containing a paragraph tag of text. When I hover this div, I want the text to come out the div (from behind). I tried negative z-index but it didn't work. </p>
  
  <pre><code>.box p {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: -1;
    visibility: hidden;
    transition: top .3s, opacity .3s, visibility .3s, z-index .3s;
  }
  
  .box:hover p {
    top: -28px;
    opacity: 1;
    z-index: 1;
    visibility: visible;
  }
  </code></pre>