Transition in elements using: hover: after

Question

Transition in elements using: hover: after

Navigation

#1 by (3 votes)

2

How can I apply a transition, for example in a background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%) without hover and background:linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 60%) with hover in the after of an element?

For example, I tried the following code:

a:after{
   content:'';
   top:0;
   bottom:0;
   left:0;
   right:0;
   position:absolute;
   background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 40%);
   transition:background 1s ease-out
}
a:hover:after{
   background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 50%)
}

But apparently it did not work, is there any way to accomplish this?

css seletores

asked by anonymous 31.01.2017 / 17:44

1 answer

How to sort a List of Strings? Consume Web Service SGS Central Bank Brazil - Dollar Quotation

score 3 · Accepted Answer

Gradients do not support transitions yet (although the specification says they should).

CSS3 gradient transition with background-position

While you can not directly animate gradients using the CSS transition property, you can animate the background-position property to achieve a simple gradient animation:

The code for this is simple:

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  
  
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
  
    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}

<div id="DemoGradient"></div>

Or use the opacity transition:

a:after{
   content:'';
   top:0;
   bottom:0;
   left:0;
   right:0;
   position:absolute;
   background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 50%);
   transition: all 1s;
  opacity: .7;
}
a:hover::after{
    opacity: 1;   
}

<a href="#"></a>