#eight    {
                background: linear-gradient(to bottom, 
                                  rgba(2,62,31,.5),
                                  rgba(24,199,140,1),
                                  rgba(2,62,31,.5));
                color:maroon;
                transition:all, 2s;
             }
#eight:hover  {
                        background:radial-gradient(5em circle,
                                         rgba(115,6,162,1),
                                         rgba(113,112,127,.5),
                                         rgba(115,6,162,1));
                        color:white;
                        transition:color, 2s;
                  }

http://coboldinosaur.com/pages/hover-effects-using-gradients.html

A simple transition from a linear gradient to a radial gradient can be made very dramatic by including a color change transition.  One of 10 effects presented.

Transition Effect for Gradients on Hover

css, html

CSS