Css Transition hover gradient

Question

I have one question about transition effect. I created this fiddle

I want to add a transition effect for hover. But it is not working. Anyone can help me here ?

.h_grid_2 .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    -webkit-transition: 1s all;
    transition: 1s all;
}

.h_grid_2:hover .gradient_c_grd_2 {
    position:absolute;
    width:384px;
    height:200px;
    z-index:1;
    background: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255 255, 255, 0.2));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0, 0), rgba(255, 255, 255, 0.2));
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2));
    -webkit-transition: 1s all;
    transition: 1s all;
}

CSS transitions do not support background images yet (and CSS gradients are considered as images, too). — Terry, Oct 15 '14 at 12:02

score 2 · Accepted Answer · answered Oct 15 '14 at 12:05

2

Checkout my way: http://jsfiddle.net/gqLgu7jw/1/

The idea is to add another div (.gradient_c_grd_3) and use styles like these:

.h_grid_2:hover .gradient_c_grd_3{
    opacity: 1;
}

.h_grid_2:hover .gradient_c_grd_2 {
   opacity: 0;
}

answered Oct 15 '14 at 12:05

Slawa Eremin

5,264
18
28

This is right solution. Thank you – Oct 15 '14 at 12:07

score -1 · Answer 2 · edited Oct 15 '14 at 12:47

This is impossible for now! CSS transitions do not support background images yet.

But you can play with ghe background-size and background-position:

Quoted from Animating CSS3 Gradients:

... since CSS3 gradients are not really properties, but are actually images created by the browser, they aren’t in that list of animatable properties. But that doesn’t mean you can’t animate gradients.

Gradients, just like standard images, are subject to certain background-related properties that are animatable. These include background-size and background-position.

For some basic code-snippets and examples incorporating this idea, I suggest you have a look at the above website.

Css Transition hover gradient

2 Answers2