add color tint in image hover in jquery + css

Question

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?

here's my attempt, i added a background-color to mouseover event in my jquery.

$(document).ready(function(){
  var maxLength = 120;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<center><button class="btnsvc" name="wwdimg" style="top:20px" href="#!">Learn More</button></center>');
    }
  });

    $('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%)"});
    });


});


<div class="content back">
<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" /> 

   <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants    
</div>

</div>

http://jsfiddle.net/4yh9L/604/

Answer 1

I have wrapped your img tag in a div

$(document).ready(function(){
  var maxLength = 120;
  $(".show-read-more").each(function(){
	var myStr = $(this).text();
	if($.trim(myStr).length > maxLength){
	  var newStr = myStr.substring(0, maxLength);
	  var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
	  $(this).empty().html(newStr);
	  $(this).append('<center><button class="btnsvc" name="wwdimg" style="top:20px" href="#!">Learn More</button></center>');
	}
	 });

	$('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%)"});
		$('.img-block').addClass('active');
		
	});
	$('button[name="wwdimg"]').mouseout(function(){
		$('img[name="img_holder"]').css({"opacity": "1","filter":"brightness(10%)"});
		$('.img-block').removeClass('active');
	});


});

.img-block {
  width: 300px;
  position: relative;
}
.img-block:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  background: rgba(255, 165, 0, 0.3);
  z-index: 1;
  opacity: 0;
}
.active.img-block:before {
  opacity: 1;
}
.img-block img {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content back">
		<div class="img-block">
       		 <img name="img_holder" src="http://via.placeholder.com/300" alt="" width="300" height="300" class="alignnone size-medium wp-image-604" /> 
        </div>
        <div class="show-read-more">
        	Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants    
        </div>

	</div>