html - Change text color when hover over background image in same div -

in div tag have background image , below there text link well. background image , text link wrapped in same <a> tag.

now trying change color of text link both when mouse on background image or text link.

what achieved far change text color when hover on text cannot when hover on image.

any ideas should apply hover property? tried hundreds of variations , still cannot it.

here test demo:

http://jsfiddle.net/bradg/65uhg/

and code, bit long sorry that.

edit updated css code , removed unrelated problem lines

css:

.make_cat_img_thumbnail {   display: inline-block;   max-width: 100%;   height: auto;   padding: 4px;   line-height: 1.428571429;   background-color: #fff;   border: 1px solid #ddd;   border-radius: 7px;   -webkit-transition: .2s ease-in-out;           transition: .2s ease-in-out;           text-decoration:none;  }  .text-center {   text-align: center; }  .text-muted {   color: #999; }  .text-muted:hover {   color: orange; }  .c-cover-image {      width:120px;      height:120px;      background-size:100% 100%;      margin:auto;      background-repeat:no-repeat;      background-position:center center; } 

html:

<div class="make_catalogue" style="padding-top:10px;">      <div class="col-sm-3 col-xs-4 c-mobile c-mbottom">         <a href="google.com" class="make_cat_img_thumbnail">             <div style="background-image:url(../images/ctg/10085_1.jpg)" class="c-cover-image">             </div>             <br>             <p class="text-center text-muted">some text</p>         </a>     </div>  </div> 

thanks lot!!!

since image in background cannot use hover. instead use this:

.make_catalogue:hover a, .make_catalogue:hover p { color:orange; text-decoration:underline; }