CSS transition background gradient

Question

I'm trying to get a CSS transition to fade in a background gradient.

I had the transition working when it was just flat colours, but now that I've changed it to a radial gradient it just appears instantly. I think it might also be something to do with the fact I'm using a semi-transparent colour as one of the colour values.

.cta-01 .cta a:hover {
    background-image:
        radial-gradient(
          circle,
          rgba(0, 0, 0, .75),
          rgba(0, 0, 0, 1)
        );

    -webkit-transition: background-image 250ms linear;
    -moz-transition: background-image 250ms linear;
    -o-transition: background-image 250ms linear;
    -ms-transition: background-image 250ms linear;
    transition: background-image 250ms linear;
}

Can anyone see what I'm doing wrong?

Right now, the only property that you can transition is background-position — vals
– vals, Commented Nov 7, 2016 at 17:32

hairmot · Accepted Answer · 2016-11-07 16:42:07Z

1

unfortunately you cannot use transition on background-image however you could set another element to sit on top of this element and set the opacity on this element from 1 to 0 - which would slowly reveal your gradient underneath.

i've hacked together an example using divs and borrowed your classes:

<div class="cta-01">
    <div class="cta" >
        <div class="dummybg"></div>
    </div>
</div>


.cta {
    height:100px;
    width:100px;
}
.dummybg {
    height:100px;
    width:100px;
    background-color:white;
    opacity:1;
    transition:opacity 1s
}
.dummybg:hover {
    opacity:0;
}

.cta-01 .cta:hover {
    background-image:
    radial-gradient(
    circle,
    rgba(0, 0, 0, .75),
    rgba(0, 0, 0, 1)
    );

    -webkit-transition: background-image 250ms linear;
    -moz-transition: background-image 250ms linear;
    -o-transition: background-image 250ms linear;
    -ms-transition: background-image 250ms linear;
    transition: background-image 250ms linear;
}

here is a fiddle jsfiddle

edited Nov 7, 2016 at 16:42

answered Nov 7, 2016 at 16:36

hairmot

2,9551 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1049944 Over a year ago

ah thanks, that's a good idea but unfortunately wouldn't work in my case, as the hover effect is on top of an image... maybe I should set the gradient itself to an image rather than using CSS! or maybe go with jQuery

Collectives™ on Stack Overflow

CSS transition background gradient

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related