css - Use CSS3 transitions with gradient backgrounds -


i'm trying transition on hover css on thumbnail on hover, background gradient fades in. transition isn't working, if change rgba() value, works fine. gradients not supported? tried using image too, won't transition image either.

i know it's possible, in post did it, can't figure out how exactly. help> here's css work with:

#container div {   -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))) } 

gradients don't support transitions yet (although current spec says should support gradient gradient transitions via interpolation.).

if want fade-in effect background gradient, have set opacity on container element , 'transition` opacity.

(there have been browser releases supported transitions on gradients (e.g ie10. tested gradient transitions last year , seemed work @ time, test code no longer works - perhaps there glitch in matrix.)


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -