title: css transition opacity of the background color
body: <p>looking for clue, how to use the opacity in background color with transition?</p>
  
  <p>I'm using <code>rgba()</code> function, but the transition is not working on hover.</p>
  
  <pre class="lang-css prettyprint-override"><code>.bx{
    background:rgba(255,0,0,0.5);
    width:100px; height:100px;
    position:relative;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
  }
  
  .bx:hover{
    background:rgba(255,0,0,1);
  }
  
  .t{
    position:absolute; 
    bottom:0px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="bx"&gt;&lt;div class="t"&gt;text&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any idea, how can I use transition for <code>.bx</code>?</p>