Transition between background color and CSS3 background image

Question

I have a set of divs and I want each of them to have a different background color and when hovering over the background image of the selected URL. I still managed to find the code for a smooth transition of the color → the image, but this requires the actual img code in HTML, and I need these divs, since I will put text in them.

Is it likely to have a smooth transition of 0.5 or less from background color to background that runs through CSS?

If you look at http://loopedmag.com , you can see what I want to recreate in the code, but with the color-> image converted color.

Answer 1

You cannot animate a property backgroundfrom a solid color to an image with CSS3 transitions.

To achieve the desired behavior, you will need to fade in / out of the layer with full background color. You can use a pseudo-element to minimize the markup for this layer.

Demo

HTML:

<div class="one"></div>
<div class="two"></div>

CSS:

body,html{
    height:100%;
}

div{
    height:50%;
    width:50%;
    position:relative;
    background-size:cover;
}
.one{
    background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);
}
.two{
    background: url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
}
div:after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:100%;
    background:gold;
    opacity:1;

    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
div:hover:after{
    opacity:0;
}

Answer 2

This should help you get started = FIDDLE .

You can also use JS, but this is optional.

CSS

.changeme {
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
    line-height: 200px;
    color: blue;
    font-size: 30px;
}
.changeme:hover {
    background-color: transparent;
    background: url('http://i.imgur.com/DgYUsKY.jpg?1');
}
.changeme2 {
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: blue;
    text-align: center;
    line-height: 200px;
    color: white;
    font-size: 30px;
}
.changeme2:hover {
    background-color: transparent;
    background: url('http://i.imgur.com/BF7aTQR.jpg');
}