Advanced Search

Return to Snippet

Revision: 69106
at April 21, 2015 04:31 by COBOLdinosaur
Initial Code 
#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;
                  }
Initial URL 
http://coboldinosaur.com/pages/hover-effects-using-gradients.html
Initial Description 
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.
Initial Title 
Transition Effect for Gradients on Hover
Initial Tags 
css, html
Initial Language 
CSS