css 显示图像时 hover + 动画覆盖

Question

I'm trying to show the image when hover... it has a liner gradient..

I read that the gradient does not support animation yet.

Is there a hack to make it animate? do I have to use before or after in some part?

This is what it looks like:

Before hover

After hover

 .custom-box { padding: 50px; border: 1px solid #333; cursor: pointer; transition: all 1s ease-in; }.custom-box:hover { background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images4.alphacoders.com/197/thumb-1920-197758.jpg") no-repeat center center/cover; }

 <div class="custom-box"> <h3 class="text-center display-3">TEST <i class="fas fa-plane"></i></h3> </div>

Answer 1

You can't transition directly on complex background property, but you can simulate by using other elements or pseudo-elements, and hiding/showing on hover with opacity property.

Example using pseudo-elements

 .custom-box { box-sizing: border-box; width: 100%; height: 150px; position: relative; border: 1px solid #333; cursor: pointer; z-index: 2; text-shadow: 0 0 10px white; }.custom-box::before { box-sizing: border-box; width: 100%; height: 150px; position: absolute; content: ''; transition-duration: 1s; background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images4.alphacoders.com/197/thumb-1920-197758.jpg") no-repeat center center/cover; opacity: 0; z-index: -1; }.custom-box:hover::before { opacity: 1; }

 <div class="custom-box"> <h3 class="text-center display-3">TEST <i class="fas fa-plane"></i></h3> </div>

Answer 2

 .custom-box { padding: 50px; border: 1px solid #333; cursor: pointer; transition: all 1s ease-in; }.custom-box:hover { background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("https://images4.alphacoders.com/197/thumb-1920-197758.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; }

 <div class="custom-box"> <h3 class="text-center display-3">TEST <i class="fas fa-plane"></i></h3> </div>

Answer 3

I'm trying to show the image when hover ... it has a liner gradient ..

I read that the gradient does not support animation yet .

Is there a hack to make it animate ? do I have to use before or after in some part?

This is what it looks like :

Before hover

After hover

 .custom-box { padding : 50px; border : 1px solid #333; cursor: pointer; transition: all 1s ease-in; } .custom-box:hover { background : linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url("https://images4.alphacoders.com/197/thumb-1920-197758.jpg") no-repeat center center/cover ; }

 <div class="custom-box"> <h3 class="text-center display-3">TEST <i class="fas fa-plane"></i></h3> </div>