title: Change text color when hover over background image in same div
body: <p>In a <code>div</code> tag I have a background image and below that there is a text link as well.
  The background image and text link are wrapped in the same <code>&lt;a&gt;</code> tag.</p>
  
  <p>Now what I am trying to do is to change the color of the text link both when the mouse is over the background image or the text link.</p>
  
  <p>What I achieved so far is to change only the text color when hover over the text but cannot do it when hover over the image. </p>
  
  <p>Any ideas where I should apply the hover property? Tried a hundreds of variations and still cannot do it.</p>
  
  <p>Here is the test demo:</p>
  
  <p><a href="http://jsfiddle.net/Bradg/65UHg/" rel="nofollow">http://jsfiddle.net/Bradg/65UHg/</a></p>
  
  <p>And the code, it is a bit long sorry for that.</p>
  
  <p><strong>EDIT</strong> Updated the CSS code and removed some unrelated to the problem lines</p>
  
  <p>CSS:</p>
  
  <pre><code>.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: all .2s ease-in-out;
            transition: all .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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="make_catalogue" style="padding-top:10px;"&gt;
  
      &lt;div class="col-sm-3 col-xs-4 c-mobile c-mbottom"&gt;
          &lt;a href="google.com" class="make_cat_img_thumbnail"&gt;
              &lt;div style="background-image:url(../images/ctg/10085_1.jpg)" class="c-cover-image"&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;p class="text-center text-muted"&gt;Some Text&lt;/p&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks a lot!!!</p>