CSS How to Transition from White to Background on Hover - css

Question

I'm trying to create a transition from a white background to an image background. This way when the viewer hovers over a section it goes from plain to styled.
Here's my current code:
div.camp {
background: #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 8px;
padding: 8px;
transition: all 1s linear 0s;
}
div.camp:hover {
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border: 1px solid #CECECE;
}
Here's the page this code is on: http://www.summitpost.org/eldorado-peak/150316#chapter_7
From what I understand it's easy to have background colors transition. But it seems as though background images are not supported for transition.

Answer 1

Unfortunately you cannot use transition on background images in the way you've specified. You can see the W3C list of animation property types here.
You could potentially lay your white background over the top, then animate its opacity on hover (to show the image beneath).
Code Sample
You could obviously make this prettier. I've just cobbled something together to give you an idea.
div.camp {
border: 1px solid #CCCCCC;
background: #EFFFD5 url("http://www.alpinejosh.com/host/sp/images/camp.png");
background-position: center bottom;
background-repeat: repeat-x;
border-radius: 8px;
position: relative;
}
div.camp-overlay {
padding: 8px;
border-radius: 8px;
position: absolute;
z-index:50;
width: 100%;
height: 100%;
background:white;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div.camp-overlay:hover {
background: rgba(255,255,255,0); /* use opacity for older browsers*/
}​​​​​​​​​​​​​
HTML for the above CSS
<div class="camp">
<div class="camp-overlay"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
JSFiddle of the above
http://jsfiddle.net/p7mcy/

Answer 2

What you could do is make two div elements, one on top of the other, and fade top div out on hover.
<div class="wrapper">
<div class="image"></div>
<div class="white-bg"></div>
</div>
.wrapper{position:relative;}
.image, .white-bg{position:absolute; top:0; left:0; width:100px; height:50px;}
.image{background:red;}
.white-bg{background:white; z-index:9999; -webkit-transition:opacity 0.3s linear; opacity:1;}
.white-bg:hover{opacity:0;}​
Should work
fiddle: http://jsfiddle.net/b46z8/5/