Show / Hide background image of div on hover - html

Question

I'm currently trying to figure out if it is at all possible to show and hide the background image on a div with a hover state.
Here's some code:
HTML
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
<div class="thumb">
<div class="text">
Header<br>
Sub-header<br><br>
Date
</div>
</div>
CSS
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
So essentially I want to alternate between a background image and the background color, so when you hover over the div the background image is show, and on mouseout the background image is hidden and you revert to the background colour (silver).
I found this was do-able via pseudo classes but as this is for a CMS site the images will be changed on the fly, therefore they'll have to be inserted via html:
style="background-image: url('insert url here')"
Is this at all possible to hide and show the background-image?

Answer 1

Is there any reason you cannot use the :hover pseudo-class to make the image appear/disappear when hovered?
For example:
div {
background-image: none;
}
div:hover {
background-image: url('insert url here');
}

Answer 2

Are you against using Javascript (or jQuery)?
If not, I have a solution using the .hover() function in jQuery. You said you didn't want to add new classes for new images. So I'm proposing you store the urls in the .thumb elements.
HTML:
<div class="thumb" data-hoverimage="http://placekitten.com/250/400">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/250/300">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
<div class="thumb" data-hoverimage="http://placekitten.com/400/250">
<div class="text">Header
<br>Sub-header
<br>
<br>Date</div>
</div>
I stored each thumbnail's url in the data-hoverimage attribute (it can be whatever you want).
Then, using jQuery, we can use the hover function. The first function is for when the cursor is over, the second for when the cursor is out.
$(".thumb").hover(function(){
var imgurl = $(this).data("hoverimage");
$(this).css("background-image", "url(" + imgurl + ")")
}, function(){
$(this).css("background-image", "");
});
I have a working model here: http://jsfiddle.net/auURQ/

Answer 3

use this css
.thumb:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
if you have different image per Div You have two way for this
1)make a share css for them and dedicated css for on hover image
#thumb1:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
#thumb2:hover{
background: url("http://www.imageurlhere.com") no-repeat 50% 50%;
}
.thumb {
width: 400px;
height: 250px;
background-color: silver;
font-weight: bold;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.text {
padding: 15px;
}
another way is use JS or JQuery Lib for set hover Event ,...