title: CSS Hover Expand
body: <p>I need to expand a section of my advert when it is hovered on </p>
  
  <p>please see here: <a href="https://jsfiddle.net/u7kpc9jL/2/" rel="nofollow">https://jsfiddle.net/u7kpc9jL/2/</a></p>
  
  <p>I would like the bottom to align to the bottom of the advert and I also need to show different text when expanded. </p>
  
  <p>Any ideas?</p>
  
  <p>CSS</p>
  
  <pre><code>body {
      height:250px;
      width:300px;
      border:solid 2px;
  }
  
  .legal:hover {
      height:40px;
      width:250px;
      margin-bottom:20px;
      top:80px;
  
  }
  
  .legal-text {
      padding-top:2px;
      font-size:9px;
      color:#FFFFFF;
      font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
      text-align:center;
  }
  
  .legal {
      height:17px;
      width:85px;
      background-color:#006fba;
      left:0px;
      top:100px;
      z-index:110;
      margin-top:233px;
  }
  </code></pre>