Radial Gradient CSS Transition

Question

I have a div with background-image and radial-gradiant like this:

.main-header {
  z-index: 2;
  padding: 1rem;
  background: var(--themeColor3);
  margin-bottom: 1rem;
  padding-bottom: 3.5rem;
  clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
  text-align: center;
  height: 300px;
  background: radial-gradient(30% 65% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
  transition: background 5s;
}

And I'm trying to grow the radial gradient circle when hovering like this:

.main-header:hover {
  background: radial-gradient(32% 75% at 50% 50%, rgba(0, 0, 0, 0) 35%, #222226 60%), url('./assets/images/jpkMain.png');
  background-repeat: no-repeat;
  background-position: center;
}

And this is my JSX code:

    render() {
        return (
            <div className="container">

                <header className="main-header">
                </header>
            </div>
        )
    }

Answer 1

No, you can't have both on one element since gradients are rendered as background-images: https://www.w3schools.com/css/css3_gradients.asp

You could put a transparent element above (z-index) the one with the image that changes opacity on hover.

Also, gradients still aren't transitionable, but as I mentioned you can work with opacity. Or try animating SVGs