Posted By

COBOLdinosaur on 04/21/15

Tagged

css
html

Versions (?)

Last Edited at 04/21/15 04:31am

Statistics

Viewed 1058 times

Favorited by 0 user(s)

Related snippets

Transition Effect for Gradients on Hover

/ Published in: CSS

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

#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;
                  }