background-transition with background-size: cover

问题

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 background-size: cover.

But I want to be able to have the images zoom in and grow on hover. This transition doesn't work with the cover attribute it seems. Actually, the image zooms but without the transition effect. It goes instantly from "cover" to, in this case, 110%. It works fine when the original background-size was set as 100%.

But with this, on resizing the page the image seems to tile somewhat behind the div, which is not what I want. Cover keeps it central at all times, what I want.

Any advice appreciated on how to have a transition as it grows with cover or the same effect.

Ilmiont

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/27384684/background-transition-with-background-size-cover

标签

html

css

transition

background-size