How to transition background-image with gradient and image?

Question

so I am making a website which has come to have a hover gradient that goes over a background image. But one thing I can't seem to make it do, is to transition smoothly. Anyone able to spot the reason why?

tl;dr: I would like to get the gradient to fade in.

Here is my JSfiddle: clicky

CSS:

div.home_wrapper > div.header {
    width:calc(70% - 5px);
    height:calc(70% - 5px);
    position:relative;
    margin-top:5px;
    float:left;
    background-image:url(assets/13.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    transition:background-image 0.25s ease-in-out;
}
div.home_wrapper > div.header:hover {
    background-image:-webkit-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:   -moz-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:     -o-linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
    background-image:        linear-gradient(rgba(0,0,0,0.01), rgba(0,0,0,0.5)), url(assets/13.jpg);
}

what are you trying to achieve? a fade-in effect? the gradient rendering line after line from top to bottom? it's not clear — Luca, Oct 14 '14 at 11:08
@luca a fade effect, that's why it says `ease-in-out` but that doesn't work. — zxc, Oct 14 '14 at 11:38
then you should animate the opacity, as background-image can't be animated as per W3C spec - see the answer already provided by @Raad — Luca, Oct 14 '14 at 11:43

score 3 · Accepted Answer · edited May 23 '17 at 10:25

This is essentially the same problem as CSS3 background image transition

One solution is to introduce an extra layer, and get the transition to apply to the layer's opacity:

HTML

<div class="home_wrapper">
    <div class="header">
        <div class="headercontent"></div>
    </div>
</div>

CSS

html, body {
    height:100%;
}
div.home_wrapper {
    width:100%;
    height:100%;
}
/*below here is the issue*/
 div.home_wrapper > div.header {
    width:calc(70% - 5px);
    height:calc(70% - 5px);
    position:relative;
    margin-top:5px;
    float:left;
    background-image:url(assets/13.jpg);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    /*so that you can see where it is ->*/
    border:solid 1px #333;
}
.headercontent {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.5)), url(assets/13.jpg);
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 0;
}
div.headercontent:hover {
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
    opacity: 1;
}

See http://jsfiddle.net/raad/tdabsmsL/

How to transition background-image with gradient and image?

1 Answers1