Créer un effet de zoom sur une image au survol à l'aide de CSS ?

Question

J'essaie actuellement de créer un effet de zoom au survol d'une de mes quatre images. Le problème est que la plupart des exemples utilisent généralement des tableaux ou des divs masqués pour appliquer une sorte d'effet.

Voici un exemple qui met en œuvre ce que je souhaite este .

Ce site Voici mon code jusqu'à présent.

HTML

<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>

CSS

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}

#menu img {
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    overflow: hidden;
}

.blog {
    height: 375px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
}

.music {
    height: 375px;
}

.projects {
    height: 375px;
}

.bio {
    height: 375px;
}

Answer 1

.item:hover img 
{
 -moz-transform: scale(1.3);
 -webkit-transform: scale(1.3);
 transform: scale(1.3);
}

De cette façon, vous pouvez zoomer n'importe quelle image avec une simple animation. Si vous avez besoin d'un tutoriel complet, voici un tutoriel officiel : http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Answer 2

SOLUTION 1 : Vous pouvez télécharger maître-zoom .
SOLUTION 2 : Aller à aquí .
SOLUTION 3 : Vos propres codes

.hover-zoom {
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
     transition:all 0.3s
 }
.hover-zoom:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
     transform: scale(1.5)
 }

<img class="hover-zoom"  src="https://i.stack.imgur.com/ewRqh.jpg" 
     width="100px"/>

Answer 3

  <div class="item">
  <img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
  <img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
  <div class="item-overlay top"></div>

css :

.item img {

  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.item img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Answer 4

 -webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;  

Je veux juste faire une remarque sur les transitions ci-dessus.

 -webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;

et -ms- ne fonctionne certainement pas pour IE 9, je ne sais pas d'où vous tenez cette idée.

Answer 5

    .img-wrap:hover img {
        transform: scale(0.8);
    }
    .img-wrap img {
        display: block;
        transition: all 0.3s ease 0s;
        width: 100%;
    }

    <div class="img-wrap">
    <img src="http://www.sampleimages/images.jpg"/> // Your image
    </div>

Ce code n'est que pour l'effet de zoom arrière. Définissez la div "img-wrap" selon vos styles et insérez le style ci-dessus pour obtenir l'effet de zoom arrière. Pour l'effet de zoom avant, vous devez augmenter la valeur de l'échelle (ex : pour le zoom avant, utilisez transform : scale(1.3) ;