title: How to disable css transition for specific line of css?
body: <p>Hello I have a div that is set to a fixed height, and when you hover over it, it grows by a certain amount. </p>
  
  <p>I also have it set so when you hover over the div, the background color changes as well.</p>
  
  <p>Right now the hover transitions the height AND the background color. Is there any way to disable the transition for just the background color? The background color transitions with the height, it fades from black to white with the height change. I dont want the background color to fade.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;p class="text"&gt;text text text&lt;/p&gt;
      &lt;p class="content"&gt;text text text text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.box {
      background-color: #000;
      width: 200px;
      height: 300px;
      position: relative;
      top: 80px;
      -webkit-transition: all 0.25s ease;
      -moz-transition: all 0.25s ease;
      -ms-transition: all 0.25s ease;
      -o-transition: all 0.25s ease;
      transition: all 0.25s ease;
  }
  
  .box:hover {
      height: 300px;
      background-color: #fff;
      top: 40px;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/nhvuwu9z/1/" rel="nofollow">Here is the jsFiddle link</a></p>