html - Change image color on hover -

i have image have used z-index place box , text on image: here's looks like:

and that's done using code:

#wrap {     position:relative;      width: 200px;       height: 145px;     border: 1px solid grey }    #text {     z-index: 100;     position: absolute;         color: white;     font-size: 20px;     font-weight: bold;     padding: 10px;     left: 0;     right: 0;     bottom: 0;     background: rgba(0,0,0,.7); } 

and calling function:

<div id="wrap">     <img src="/wp-content/uploads/2014/03/brandslang.png"/>     <div id="text">brand</div> </div> 

this image etc used link want give user sort of response when or hovers on image , want have box span on whole image when user hovers on this:

i looked @ a:hover i'm not sure how implement affect image , not every single link have on page, , hoping guys me! :)

what said correct hover level: http://jsfiddle.net/83n5x/1/

<div id="wrap">     <img src="http://www.rhpreventie.nl/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/b/r/brandslanghaspel-25-meter-19-mm.png" height="145"/>     <div id="text">brand</div>     <div class="cover"></div> </div>  .cover {     height: 101px;     width: 100%;     position: absolute;     top: 0;     left: 0;     background: rgba(0,0,0,.7);     display:none; }