CSS Transition background image to fade in but not animate size

Question

I want to make an image slideshow.

I am using CSS to make it transition smoothly between one image to the other, but this animates not only the fade-in transition but also the image size..

My current CSS:

 .slideshow{

    width:100%; 
    height:100%; 
    background-size:cover; 
    background-repeat: no-repeat; 
    background-position: center;  
    transition: background-image 5s;
    overflow:hidden;
 }

This fiddle shows exactly the problem: https://jsfiddle.net/raphadko/gchey1tL/

My question is.. is there a way to transition only the image fadeing, not the resizing?

Answer 1

You can get rid of the CSS transition property and do this with jQuery using the fadeOut() function:

 $('#changeSlide').on('click', function() { $('.slideshow').fadeOut('500', function() { $(this).css('background-image', "url('http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-210147.jpg')").fadeIn('500'); }); }) 

 .slideshow { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; background-image: url('https://s-media-cache-ak0.pinimg.com/236x/8c/e5/7a/8ce57a18e94e9f5fdc29865c7d927d6c.jpg'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="overflow:hidden; width:300px; height:300px"> <div class="slideshow"></div> </div> <button id='changeSlide'>Change Slide</button> It not only fades but it resizes too.. I want it to fade to the image already sized up to fit the slideshow div 

jsFiddle Demo