CODEWITHSUNDEEP
htmlcsscss-transitions
faisaljanjua
faisaljanjua

Reputation: 936

css transition opacity of the background color

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?

Upvotes: 20

Views: 67424

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99484

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.

Upvotes: 33

Related Questions