Change background color on image hover - html

Question

How would I make it so that if you hover over an image, the entire image changes to the color black (the image link must be in the HTML tag as the sizes and images are different)?
Here's what I have:
HTML:
<img src="http://www.floral-directory.com/flower.gif" class="image" />
CSS:
.image {
width: 250px;
}
.image:hover {
background: #000000;
}

Answer 1

The easiest way to do this is to wrap the img element in another, for example a span:
<span class="imgWrap">
<img src="http://www.floral-directory.com/flower.gif" class="image" />
</span>
And couple that to the CSS:
.imgWrap {
display: inline-block;
border: 1px solid #000;
}
.imgWrap:hover {
background-color: #000;
}
img:hover,
.imgWrap:hover img {
visibility: hidden;
}
JS Fiddle demo.
And, if you'd like to make it a little prettier, using transitions to fade in/out:
.imgWrap {
display: inline-block;
border: 1px solid #000;
background-color: #fff;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap img {
opacity: 1;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.imgWrap:hover {
background-color: #000;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
img:hover,
.imgWrap:hover img {
opacity: 0;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.

Answer 2

The HTML
<div class="change_bg">
<img src="http://eofdreams.com/data_images/dreams/image/image-07.jpg" >
</div>
The CSS
.change_bg img{
max-width : 300px;
}
.change_bg{
width : 300px;
height : 300px;
float:left;
}
.change_bg img:hover{
visibility : hidden;
}
.change_bg:hover {
background : #bc7d89;
}
Live Example # http://cdpn.io/Bmthc