title: Make background image darken on hover
body: <p>I want to make the background image of something darker when I hover over it. Currently it will make everything dark including the text.</p>
  
  <p>Here is the html</p>
  
  <pre><code>&lt;div class="col-md-6 cities"&gt;
      &lt;div class="card card-background cities" fadebg="true" data-image="https://test.jpg"&gt;
          &lt;div class="card-body"&gt;
              &lt;h3 class="card-title"&gt;TEST&lt;/h3&gt;
              &lt;p class="card-description"&gt;
                  TEST
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;                        
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jquery:</p>
  
  <pre><code>$('.cities').find('.card.card-background.cities').hover(function () {
      //$(this).find("[fade=bg]").fadeTo(500, 0.5);
      $(this).find('.card-title').css("display", "block");
      $(this).find('.card-description').css("display", "block");
  },
  function () {
          //$(this).find("[fade=bg]").fadeOut(500);
          $(this).find('.card-title').css("display", "none");
          $(this).find('.card-description').css("display", "none");
      }
  );
  </code></pre>
  
  <p>The data image is being rendered into a background image</p>
  
  <pre><code>setTimeout(function () {
      $(document).ready(function () {
          $('div[data-image]').each(function () {
              $(this).css("background-image", "url('" + 
      $(this).attr('data-image') + "')");
          });
      });
  }, 1000);
  </code></pre>