Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 21 down vote favorite
8

I'm trying to transition on hover with css over a thumbnail so that on hover, the background gradient fades in. The transition isn't working, but if I simply change it to an rgba() value, it works fine. Are gradients not supported? I tried using an image too, it won't transition the image either.

I know it's possible, as in another post someone did it, but I can't figure out how exactly. Any help> Here's some CSS to work with:

#container div a {
  -webkit-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  transition: background 0.2s linear;
  position:absolute;
  width:200px;
  height:150px;border: 1px #000 solid;
  margin:30px;z-index:2
}
#container div a:hover {
  background:-webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0,0,0,.7)), to(rgba(0,0,0,.4)))
}
share|improve this question

6 Answers

up vote 23 down vote accepted

Gradients don't support transitions yet (although the spec says they should). If you want a fade-in effect with a background gradient, you have to set an opacity on the container and transition the opacity.

(and I'd like to see the other post where you say it was done.)

share|improve this answer
1  
Moreover, gradient spec is not finished yet and current gradient spec development already far away from current -webkit-gradient implementation. – c-smile Jul 1 '11 at 1:03
1  
But edge webkit browsers now support the new mozilla-heritage gradient spec as well as the older webkit syntax. Confusingly, they're both -webkit prefixed – Michael Mullany Jul 1 '11 at 1:22
That that IE10 fully supports gradient transitions. – Kolink Apr 26 at 19:54
up vote 12 down vote

One work-around is to transition the background position to give the effect that the gradient is changing: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

share|improve this answer
unfortunately doesn't work with color-stop gradients. – ahren Feb 6 at 0:18
@alan Nice trick ! – Steffi Apr 23 at 8:33
up vote 6 down vote

A solution is to use background-position to mimic the gradient transition. This solution was used in Twitter Bootstrap a few months ago.

Here is a quick example:

Link state

 .btn {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: 20px 40px;
  background-image: -moz-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#50abdf), to(#1f78aa));
  background-image: -webkit-linear-gradient(top, #50abdf, #1f78aa);
  background-image: -o-linear-gradient(top, #50abdf, #1f78aa);
  background-image: linear-gradient(to bottom, #50abdf, #1f78aa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff50abdf', endColorstr='#ff1f78aa', GradientType=0);
  background-repeat: repeat-y;
  background-size: 100% 90px;
  background-position: 0 -30px;
  -webkit-transition: all 0.2s linear;
     -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
          transition: all 0.2s linear;
}

Hover state

.btn:hover {
   background-position: 0 0;
}
share|improve this answer
Your answer was appropriate before you edited it. It is now not an answer at all, but merely a link to your website. I am reverting your answer to the original. – Andrew Barber♦ Mar 19 at 15:52
Ok no problem. Just have to make minor changes. – vinzcelavi Mar 19 at 17:54
up vote 1 down vote

As stated. Gradients aren't currently supported with CSS Transitions. But you could work around it by in some cases by setting one of the colors to transparent, so that the background-color of some other wrapping element shines through and transition that instead.

share|improve this answer
up vote 1 down vote

You can FAKE transitions between gradients, using transitions in the opacity of a few stacked gradients, as described in a few of the answers here:

CSS3 animation with gradients.

You can also transition the position instead, as described here:

CSS3 gradient transition with background-position.

Some more techniques here:

Animating CSS3 Gradients.

share|improve this answer
up vote -1 down vote

Late post, but for future visitors, it is possible to do this with JavaScript. I wrote a small jQuery plugin a while ago to do this as an experiment and provided some demos that illustrate how to use it.

Live demo on jsFiddle.

share|improve this answer
You wrote "demos," so I was expecting an online ready-to-see demo. Am I missing the link or something? – JohnK Oct 1 '12 at 13:02
1  
@JohnK It was a link to a github project you could just download. I added a jsfiddle demo. – Dennis Oct 6 '12 at 14:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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