1
.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 0.3 ease-out;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
      opacity:0.2;
}

.box:hover {
  cursor: pointer;
  opacity:1;
}

I try to do a transition with opacity, it doesn't work, but it can work if I do the background change effect.

demo http://jsfiddle.net/rsg4e/

1

4 Answers 4

3

You were on the right track - just went the wrong way.

Fixed your fiddle

What you wanted was the background-color to change opacity, not the full element and whatever might be inside of it. All you need to do is set the backgrounds to rgba() values and you're set.

.box {

  background-color: rgba(255,0,0,0.2);

}
.box:hover {

  background-color: rgba(255,0,0,1);

}

Of course - if you ACTUALLY want everything inside of it to change opacity as well, then go with one of the other answers - they hit it on the head.

2

You're setting a transition on the background-color, when you should be calling it on the opacity i.e:

-webkit-transition: opacity 0.3s ease-out;
1

Write

transition: opacity 0.3 ease-out;

Instead of

transition: background-color 0.3 ease-out;

Because on hover you are changing opacity not background.

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: opacity 0.3 ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
      opacity:0.2;
}

DEMO

2
  • what else can I set besides background-color and opacity? Nov 30, 2013 at 15:21
  • @user3033162 I am not getting your point. you want to set something other with background,opacity? like height,width ?
    – codingrose
    Nov 30, 2013 at 15:24
1

There's not a background-color property to transition because you've specified it as background. so naturally the transition wont work.

Change it to :

-webkit-transition: background 0.3 ease-out;
  -moz-transition: background 0.3s ease-out;
  -o-transition: background 0.3s ease-out;
  transition: background 0.3s ease-out;

or

-webkit-transition: all 0.3 ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;

and your hover state to

.box:hover { background: /*younewcolor*/;}

and everything should should work fine.

2
  • 1
    I don't really wanna down-vote just for this but FYI - background incorporates all sub-properties as well (-color, -position, etc), regardless of where it's called. You can see this in action on my fiddle jsfiddle.net/Be3wN
    – Deryck
    Nov 30, 2013 at 15:21
  • @Deryck, I was unaware that background incorporates all of the sub-properties! Thanks for teaching me something and for helping rather than downvoting (+1 to your answer since its better than the accepted answer, and I cant give you rep for your comment) .
    – agconti
    Nov 30, 2013 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.