html - Show / Hide background image of div on hover -

html - Show / Hide background image of div on hover -

i'm trying figure out if @ possible show , hide background image on div hover state. here's 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 want alternate between background image , background color, when hover on div background image show, , on mouseout background image hidden , revert background colour (silver). found do-able via pseudo classes cms site images changed on fly, hence they'll have inserted via html:

style="background-image: url('insert url here')"

is @ possible hide , show background-image?

are against using javascript (or jquery)?

if not, have solution using .hover() function in jquery. said didn't want add together new classes new images. i'm proposing store urls in .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 data-hoverimage attribute (it can whatever want).

then, using jquery, can utilize hover function. first function when cursor over, sec when cursor out.

$(".thumb").hover(function(){ var imgurl = $(this).data("hoverimage"); $(this).css("background-image", "url(" + imgurl + ")") }, function(){ $(this).css("background-image", ""); });

i have working model here: http://jsfiddle.net/auurq/

html css hover