background-transition with background-size: cover

Question

This may already be answered somewhere but I haven\'t found yet after a bit of searching.

I have a series of divs with background-images. The size is set to backgrou

Answer 1

I was able to solve this problem by loading the image in a child div.

Then adjusting the scale of the image container.

  #slideshow .slide {
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    background-position:center center;
    overflow:hidden;
  } 


   #slideshow .img {
      position:absolute;
      background-size:cover;
      top:-5%;
      left:-5%;
      width:110%;
      height:110%;
      transition: width 1s, height 1s, top 1s, left 1s;  
   }  

  #slideshow .active .img{
      width:100%;
      height:100%;
      top:0;
      left:0;
  } 

Full Slideshow Markup

    

        

            

            

                

                
PRIVATE HAVEN
            
        
        

            

            

                

                
BLISSFUL SATISFACTION
            
        
        

            

            

                

                
LIVE IN NATURE AT THE MOUNTAIN’S DOOR