CSS :hover with background-image not working


I have this css code:

.button {

width: 928px;

padding: 15px;

background: midnightblue;

font-family: inter !important;

border: none;

color: white;

font-weight: 300;

font-size: 15px;

border-radius: 7px;

margin-bottom: 35px;

.button:hover {

  background-image: linear-gradient(to right top, #2525a7, #222299, #1f1f8b, #1c1c7d, #191970);

  transition: 1s;


For some reason, the transition property is not being used. It changes the background to the gradient without a transition.

Any solution? Thank you!

I don’t think transitioning background-image is supported.
A workaround would be to transition the opacity of a pseudo element with the background.


Okay. Thank you!

Is it possible to use transition with background-image to background-image?

You would need the property set in both selectors, or there is nothing to transition from.
But I’m still not sure it’s properly supported for background-image, though I think it may be inconsistent across browsers.


I have tried this with gradients as background-image, and didn’t work out.

1 Like

Okay. Thanks! I’ll just do flat colors.

@Liamgrossman you’re welcome.

1 Like

This could possibly be improved upon, but here the gradient is on a pseudo element obscured behind the main element.
On hover, the main element transitions to transparent (via the “a” value of an RGBA colour) revealing the gradient background behind.

I did alter the initial background colour to emphasise the effect.


This is great, thank you!

If the transition is on
rather than on
then the transition occurs both when starting to hover and when stopping the hover (if you see what I mean)


@wake689 I learned this over time, especially when seeing in an example where it said to apply it to the element you want it to occur. I’ve always applied it to :hover instead, and never got good results lol.