comment puis-je effectuer un zoom sur une image de fond sur un div avec un background-size

Je veux un élément div pour s'étendre à travers de 33% de la largeur avec une image d'arrière-plan fait dans le css 

background-image:url(); background-size:cover

Comment animer un zoom de l'image d'arrière-plan dans la div sur passage de la souris ou mouseneter, est-il un plugin qui peut faire cela? L'arrière-plan div a utiliser background-size:cover parce que c'est un élastique page.

Je n'ai pas de violon encore, parce que je ne sais pas où et comment commencer

InformationsquelleAutor ONYX | 2014-01-23
  1. 55

    Réponse pour ceux qui veulent hack CSS transition le zoom pour obtenir appliquée sur background-size: cover;

    - si non, que de lire la deuxième partie de la norme des moyens pour parvenir à de tels effets

    <div class="wrap">
    <div></div>
    <p>hello</p>
</div>


html, body {
    height: 100%;
}

div.wrap {
    height: 33%;
    width: 33%;
    overflow: hidden;
    position: relative;
}

div.wrap > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    background-image: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}

div.wrap:hover > div {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);    
}

    Démo (À l'aide de background-size: cover; de transition/zoom de l'élément)

    Comme vous l'avez dit que le passage de la cover taille est nécessaire, alors je suis venu avec le truc que j'avais dit précédemment, ici, j'ai un enfant de l'élément imbriqué sous position: relative; élément où suis l'enfant de l'élément mis à position: absolute; avec background-image avoir background-size ensemble de cover puis sur hover de parent, je zoom dans l'élément à l'aide de la transform: scale(2,2); propriété.

    Aussi, une chose essentielle, tout en travaillant avec cette solution est que nous avons besoin pour définir la z-index de la position: absolute; élément plus faible que ce que les éléments que vous allez placer à l'intérieur, donc il va agir comme un background

    De réponse pour ceux qui veulent aller nettoyer le HTML et le CSS

    Vous ne pouvez pas animer un background-size si sa valeur est cover donc, soit vous devrez px ou %, ou vous pouvez également utiliser un img tag avec transform: scale(2,2); propriété.

    Démo

    Demo 2 (zoom avant ou zoom arrière à partir du centre)

    div {
    height: 200px;
    width: 200px;
    background: url('http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg');
    background-size: 100% 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover {
    background-size: 150% 150%;
}

    Si vous voulez coller avec background-size: cover; que vous aurez à envelopper tout l'élément à l'intérieur d'un élément wrapper avoir des dimensions fixes avec overflow: hidden; et que l'échelle de l'élément enfant sur hover de l'élément parent.

    Comme vous avez dit, pour un img balise exemple, vous pouvez utiliser transform: scale(2,2); à atteindre avec le parent de l'élément mis à overflow: hidden;

    Demo 2

    div {
    height:300px;
    width: 300px;
    overflow: hidden;
}

div img {
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}

div:hover img {
    -moz-transform: scale(2,2);
    -webkit-transform: scale(2,2);
    transform: scale(2,2);
}
    • Comment faire alors la balise img débordement c'élément div parent afin que je puisse accomplir le zoom dans le regard cos l'img habitude de s'étirer à la totalité de la largeur de la div parent. Pouvez-vous me faire un jsFiddle exemple sur la façon de le faire
    • Merci pour l'exemple. Le problème que j'ai maintenant, c'est que le background-image s'étire parce que l'élément div est fixé à 33% et pas de largeur fixe, de sorte que pouvez-vous faire le modifier afin qu'il reste en proportion.
    • attendez, je vais vous montrer une autre démo
    • Édité ma réponse
    • Tas merci pour vous réponses, je vais donner, vous êtes de réponse officielle de la retrouver et de voir si je le cn le faire fonctionner. - Je Le seul problème, je vais avoir, c'est de l'animation sur IE11 quand il les échelles de le transformer secousses juste dans la transformation connaissez des astuces pour corriger ça
    • Essayez zoom mais chrome rendra 2 fois plus grand 🙂
    • Bonne série de réponses, je suis venu ici pour confirmer que je ne pouvais pas animer avec couvercle, était l'espoir de ne pas ajouter une div, oh bien.
    • Transition sur toutes les propriétés? Très mauvaise pratique.
    • Ce qui est mauvais dans tout cela?

    InformationsquelleAutor Mr. Alien
  2. -3
    <script>
    function animate(){
        document.getElementById('a').style.webkitTransitionDuration='1s';
        document.getElementById('a').style.backgroundSize="200% 200%";
    }
</script>
<div id="a" onmouseover="animate()" style="width: 200px; height: 70px; border: 1px solid; background: url('http://www.wpclipart.com/food/fruit/apple/apples_4/apple_honeycrisp_small.png') no-repeat;background-size: 100% 100%; ">
</div>

    Vous pouvez faire quelque chose comme cela pour les navigateurs webkit.

    Démo Ici

    • Avez-vous vraiment utiliser cette méthode dans vos propres projets? fond de taille définie à cover signifie clairement que ceux qui se doit de respecter le temps de l'image ratio d'aspect. Ce qui suggère quelque chose comme Juste à 200% est assez bizarre au moins.
    InformationsquelleAutor Vicky Gonsalves