title: Height Transition Not Working CSS
body: <p>My codes are pretty simple yet I've failed to get how a transition works and how it doesn't work on my HTML right here:</p>
  
  <pre><code>&lt;div id="footer"&gt;
      &lt;div id="footer1"&gt;
          &lt;p&gt; This should be a footer &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my CSS</p>
  
  <pre><code>        #footer {
          position: fixed;
          bottom: 0;
          background-color: black;
          min-width: 100%;
          font-family: Agency FB;
          transition: width 3s;
      }
      #footer1 {
          text-align: center;
          color: #4e4e4e;
  
      }
      #footer:hover {
  
          opacity: .8;
          color: white;
          height: 100px;
      }
  </code></pre>
  
  <p>I don't see anything wrong with my code. That or I'm still inexperienced. Thanks!</p>