CODEWITHSUNDEEP
csscss-transitionsgradientradial-gradients
user1049944
user1049944

Reputation:

CSS transition background gradient

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?

Upvotes: 0

Views: 3032

Answers (1)

hairmot
hairmot

Reputation: 2975

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

Upvotes: 1

Related Questions