Transition into elements using :Hover:after

Asked

Viewed 2,250 times

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 no after 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 didn’t work, there’s some way to accomplish that ?

css selectors css-transitions

  • This code of yours is working. https://jsfiddle.net/vqub032t/

  • but and the transition ?

1 answer

3


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

CSS3 gradient transition with background-position

Although you cannot directly animate gradients using the CSS transition property, it is possible to 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>

Browser other questions tagged css selectors css-transitions

You are not signed in. Login or sign up in order to post.