css transition opacity of the background color

Question

looking for clue, how to use the opacity in background color with transition?

I'm using rgba() function, but the transition is not working on hover.

.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;
}

HTML

<div class="bx"><div class="t">text</div></div>

Any idea, how can I use transition for .bx?

Answer 1

In fact, opacity and rgba() are completely different.

Since you are using the rgba() as the background color by the background property, you'll need to use background as transition property as follows:

.bx {
  background: rgba(255,0,0,0.5);
  width:100px; height:100px;
  position: relative;

  -webkit-transition: background .5s ease-out;
  -moz-transition: background .5s ease-out;
  -o-transition: background .5s ease-out;
  transition: background .5s ease-out;
}

.bx:hover {
  background: rgba(255,0,0,1);
}

JSBin Demo.