Background Image Transitions

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<img src="https://cp.acris.at/media/image/b3/89/8a/019.jpg">
<img src="https://cp.acris.at/media/image/1c/8e/85/011.jpg">

CSS

.tab-content-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: #efefef;
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=69&txt=Slide+1&w=816&h=300&txttrack=0);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    transition: background-image 3s linear;
    background-blend-mode: darken;
}
.tabs-wrapper {
    padding: 60px 0;
}

JavaScript

(function($) { 
	
	var images = $('img');
  //images.css('display', 'none');
  images.css('transitionProperty', 'all 350ms');
  images.css('transform', 'scale(2) translate(0px, 0px)');
	
}(jQuery));