CSS :hover with background-image not working

HTML & CSS
1

Hello.

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!

2

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

3 Likes
3

Okay. Thank you!

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

4

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.

2 Likes
5

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

1 Like
6

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

7

@Liamgrossman you’re welcome.

1 Like
8

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.

5 Likes
9

This is great, thank you!

10

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

5 Likes
11

@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.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.