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.

<div class='slide'>
    <div class='img' style='background-image:url(img/slide1.jpg)'></div>    
</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

<div id='slideshow' class='slider' >
    <div class='slides'>
        <div class='slide'>
            <div class='img' style='background-image:url(img/slide1.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>PRIVATE HAVEN</h1>
            </div>
        </div>
        <div class='slide'>
            <div class='img' style='background-image:url(img/slide2.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>BLISSFUL SATISFACTION</h1>
            </div>
        </div>
        <div class='slide' >
            <div class='img' style='background-image:url(img/slide3.jpg)'></div>
            <div class='caption'>
                <hr />
                <h1>LIVE IN NATURE AT THE MOUNTAIN’S DOOR</h1>
            </div>
        </div>
    </div>  
</div>

Answer 2

You can't use keywords (such as cover) when using CSS animations for background-size.

More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Relevant text:

background-size - yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.

One approach to get this effect is to place element with the background image in a wrapping element with overflow hidden and apply a scale transform.

.wrapper { 
  width:300px;
  height:400px;
  overflow:hidden;
}
.image {
  background:url("http://placekitten.com/g/500/500");
  background-size:cover;
  width:100%;
  height:100%;
  transition: transform 2s;
}

.image:hover { transform:scale(1.1) }

<div class="wrapper">
  <div class="image"></div>
</div>