arrière-plan de transition avec background-size: cover

C'est peut-être déjà répondu quelque part, mais je n'ai pas encore trouvé après un peu de recherche.

J'ai une série de divs avec l'arrière-plan des images. La taille indiquée est background-size: cover.

Mais je veux être en mesure d'avoir les images zoom avant et de grandir sur le vol stationnaire. Cette transition ne fonctionne pas avec la couverture de l'attribut, il me semble. En fait, l'image des zooms, mais sans l'effet de transition. Il va instantanément à partir de "couverture" pour, dans ce cas, 110%. Il fonctionne très bien lorsque l'arrière-plan d'origine-taille avait été fixé à 100%.

Mais avec cela, sur le redimensionnement de la page, l'image semble tuile peu en arrière de la div, ce qui n'est pas ce que je veux. Le couvercle garde au centre à tout moment, ce que je veux.

Tous les conseils les plus appréciés sur la façon d'avoir une transition comme il grandit avec couvercle ou le même effet.

Ilmiont

OriginalL'auteur Ilmiont | 2014-12-09

  1. 0

    J'ai été en mesure de résoudre ce problème par le chargement de l'image dans un enfant div.

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

    Ensuite le réglage de l'échelle de l'image contenant.

      #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;
  }

    Plein Diaporama De Balisage

    <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>

    OriginalL'auteur user1861582