Change Background Image
HTML
<div class="left-image">
<img style="background-image:url(https://images.unsplash.com/photo-1564055181969-12e6b089cd13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=758&q=80)" class="main-image" src="https://staging.quickdemo.tv/images/trans_bg_600x600.png"/>
<div class="transition-overlay hide"></div>
</div>
<div><span bgImg="https://images.unsplash.com/photo-1522682178063-73ad4736e440?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" class="change-image">Change Image</span></div>
CSS
.left-image{
width:100%;
height:auto;
display:block;
position:relative;
}
.transition-overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#fff;
}
.main-image{
display:block;
position:relative;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
transition: all 0.5s;
}
.main-image.hide{
opacity:0;
}
JAVASCRIPT
$( ".change-image" ).click(function() {
$('.transition-overlay').fadeIn(500, function(){
$('.transition-overlay').delay(1000).fadeOut(500);
});
$('.main-image').delay(500).css('background-image', "url("+$(this).attr('bgImg')+")");
});
function transImage() {
}
