title: add color tint in image hover in jquery + css
body: <p>I have this button which has a jquery image hover.
  How could I add a css color tint overlay to the image when the button is hovered.
  is this possible?</p>
  
  <p>here's my attempt, i added a background-color to mouseover event in my jquery.</p>
  
  <pre><code>$(document).ready(function(){
    var maxLength = 120;
    $(".show-read-more").each(function(){
      var myStr = $(this).text();
      if($.trim(myStr).length &gt; maxLength){
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append('&lt;center&gt;&lt;button class="btnsvc" name="wwdimg" style="top:20px" href="#!"&gt;Learn More&lt;/button&gt;&lt;/center&gt;');
      }
    });
  
      $('button[name="wwdimg"]').ready(function(){
          $('img[name="img_holder"]').css({"opacity": "1","filter":"brightness(10%)"});
      });
      $('button[name="wwdimg"]').mouseover(function(){
          $('img[name="img_holder"]').css({"opacity": "1","filter":"brightness(80%)","background-color":"orange"});
  
      });
        $('button[name="wwdimg"]').mouseout(function(){
          $('img[name="img_holder"]').css({"opacity": "1","filter":"brightness(10%)"});
      });
  
  
  });
  
  
  &lt;div class="content back"&gt;
  &lt;img name="img_holder" src="http://192.168.1.250/sopi2018/wp-content/uploads/2018/03/h_backoffice-300x300.jpg" alt="" width="300" height="300" class="alignnone size-medium wp-image-604" /&gt; 
  
     &lt;div class="show-read-more"&gt;Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants    
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/4yh9L/604/" rel="nofollow noreferrer">http://jsfiddle.net/4yh9L/604/</a></p>