web-dev-qa-db-fra.com

comment zoomer une image d'arrière-plan sur un div avec une taille d'arrière-plan

Je veux qu'un élément div s'étende sur une largeur de 33% avec une image d'arrière-plan réalisée en css

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

Comment puis-je animer un zoom avant de l'image de l'arrière-plan dans la div au survol de la souris ou du mouseneter, existe-t-il un plugin qui peut le faire? Le div d'arrière-plan doit utiliser background-size: cover car c'est une page élastique.

Je n'ai pas encore de violon car je ne sais pas par où ni comment commencer

javascriptjquerycsscss3background-image
27
ONYX

Réponse pour ceux qui veulent pirater le zoom de transition CSS pour se faire appliquer sur la taille de l'arrière-plan: couverture;

- si ce n'est pas le cas, lisez la deuxième section pour les moyens standard d'obtenir un tel effet

<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 (Utiliser background-size: cover; Pour faire la transition/zoomer l'élément)

Comme vous avez dit que la transition de la taille cover est nécessaire, j'ai donc trouvé l'astuce que je vous avais dit précédemment, ici j'ai un élément enfant imbriqué sous l'élément position: relative; Où je vais avoir l'enfant élément réglé sur position: absolute; avec background-image ayant background-size réglé sur cover puis sur hover du parent, je fais un zoom avant sur l'élément en utilisant le transform: scale(2,2); propriété.

En outre, une chose cruciale lors de l'utilisation de cette solution est que nous devons définir le z-index De l'élément position: absolute; Plus bas que les éléments que vous placerez à l'intérieur, il agira donc comme un background

Réponse pour ceux qui veulent aller propre avec HTML et CSS

Vous ne pouvez pas animer un background-size Si sa valeur est cover donc vous aurez besoin de px ou %, Ou vous pouvez également utiliser un img tag avec la propriété transform: scale(2,2);.

Démo

Démo 2 (zoom avant ou zoom arrière depuis le 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 vous en tenir à background-size: cover;, Vous devrez envelopper l'élément entier dans un élément wrapper ayant des dimensions fixes avec overflow: hidden; Et mettre à l'échelle l'élément enfant sur hover de l'élément parent .

Comme vous l'avez commenté, pour un exemple de balise img, vous pouvez utiliser transform: scale(2,2); pour y parvenir avec l'élément parent défini sur overflow: hidden;

Démo 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);
}
55
Mr. Alien