Créer un effet de zoom sur une image en survol en utilisant CSS?

87

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

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

C'est mon code pour l'instant.

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;
}
html class css KingPolygone
la source

Réponses:

164

Qu'en est-il de l'utilisation de la CSS3 transformpropriété et de l'utilisation scalequi donnent un effet de zoom, cela peut être fait comme ça,

HTML

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

CSS

.thumbnail {
    width: 320px;
    height: 240px;
}

.image {
    width: 100%;
    height: 100%;    
}

.image img {
    -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;
}

.image:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Voici un violon de démonstration . J'ai supprimé une partie de l'élément pour le rendre plus simple, vous pouvez toujours ajouter un débordement caché à .imagepour masquer le débordement de l'image mise à l'échelle.

zoom la propriété ne fonctionne que dans IE

Mitchell Layzell
la source
14
Et en remportant le prix des «leçons de vie profonde du code», votre CSS scande «Tout est facilité, tout est facilité».
Nerrolken
1
Comment éviteriez-vous la pixellisation?
Waltari
1
@Waltari la taille de votre image doit être 25% (le montant que nous zoomons) plus grande que la zone de contenu, donc si la vignette est de 320x240 et que nous zoomons de 25%, l'image doit être de 400x300.
Mitchell Layzell
25

Voici.

Démo

http://jsfiddle.net/27Syr/4/

HTML

<div id="menu">

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
        </a>
    </div>

    <div class="fader">
        <div class="text">
            <p>Yay!</p>
        </div>
        <a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
            <img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
        </a>
    </div>

</div>

CSS

#menu {
    text-align: center; }


.fader {
    /* Giving equal sizes to each element */
    width:    250px;
    height:   375px;

    /* Positioning elements in lines */
    display:  inline-block;

    /* This is necessary for position:absolute to work as desired */
    position: relative;

    /* Preventing zoomed images to grow outside their elements */
    overflow: hidden; }


    .fader img {
        /* Stretching the images to fill whole elements */
        width:       100%;
        height:      100%;

        /* Preventing blank space below the image */
        line-height: 0;

        /* A one-second transition was to disturbing for me */
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -o-transition:      all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        transition:         all 0.3s ease; }

        .fader img:hover {
            /* Making images appear bigger and transparent on mouseover */
            opacity: 0.5;
            width:   120%;
            height:  120%; }

    .fader .text {
        /* Placing text behind images */
        z-index: -10;     

        /* Positioning text top-left conrner in the middle of elements */
        position: absolute;
        top:      50%;
        left:     50%; }

        .fader .text p {
            /* Positioning text contents 50% left and top relative
               to text container's top left corner */
            margin-top:  -50%; 
            margin-left: -50%; }

Suggestion

Au lieu d' .fader { inline-block; }envisager d'utiliser un système de grille. En fonction de votre technologie de préférence, vous pouvez choisir Foundation , Susy , Masonry ou leurs alternatives.

Andrey Mikhaylov - Lolmaus
la source
19 
.aku { 
    transition: all .2s ease-in-out; 
}

.aku:hover {
    transform: scale(1.1); 
}
Akhil P
la source
16

J'aime utiliser une image de fond. Je trouve cela plus facile et plus flexible:

DEMO

CSS:

#menu {
    max-width: 1200px;
    text-align: center;
    margin: auto;
}
.zoomimg {
    display: inline-block;
    width: 250px;
    height: 375px;
    padding: 0px 5px 0px 5px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all .5s ease;
}
.zoomimg:hover {
    cursor: pointer;
    background-size: 150% 150%;
}
.blog {
    background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
    background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
    background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
    background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}

HTML:

<div id="menu">
    <div class="blog zoomimg"></div>
    <div class="music zoomimg"></div>
    <div class="projects zoomimg"></div>
    <div class="bio zoomimg"></div>
</div>

DEMO 2 avec superposition

jme11
la source
Je ne recommanderais pas d'utiliser une image d'arrière-plan pour cela, vous allez perdre tout l'incroyable référencement lié à l'image qui accompagne l'utilisation d'une balise d'image et d'attributs alt.
Mitchell Layzell
Je pense que c'est génial, mais vous perdez toute l'utilité de la balise img.
Daniel Naab
Si l'image n'est pas pertinente pour le référencement, j'ai trouvé cette solution plus propre.
NLemay
7

Simplement:

.grow { transition: all .2s ease-in-out; }

Cela permettra à l'élément d'attribuer une animation via css.

.grow:hover { transform: scale(1.1); }

Cela le fera grandir!

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

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

ramesh
la source
3

SOLUTION 1: Vous pouvez télécharger zoom-master .
SOLUTION 2: allez ici .
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"/>
Développer l'extrait


Honte
la source
0 
 -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 note sur les transitions ci-dessus

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

et -ms- ne fonctionnent certainement pas pour IE 9 je ne sais pas d'où vous avez eu cette idée.

DCdaz
la source
IE10 (la première version stable d'IE à prendre en charge la transition) ne nécessite pas le préfixe -ms-, les versions instables précédentes le font et il en va de même pour -moz- et -o-, les versions actuelles ne nécessitent pas, mais les versions précédentes le font.
Mitchell Layzell du
-ms- n'est absolument pas nécessaire car il n'offre de solution pour aucun des navigateurs IE pour que la transition fonctionne. Vous utilisez le préfixe pour faire fonctionner la règle spécifique, vous ne les lancez pas simplement pour le plaisir.
DCdaz
-ms- est un préfixe fournisseur qui ils ont laissé tomber sur la libération de IE 10, ce qui signifie les versions précédentes comme IE 9 toujours utiliser le préfixe du fournisseur, de nombreuses personnes utilisent malheureusement IE 9 à ce jour, maintenant en ce qui concerne la transitionpropriété IE a officiellement mis transitionen IE 10 donc là car il n'en a pas besoin, cependant si vous voulez être à 100%, il existe des versions d'IE 9 instables qui l'utilisent -ms-transition.
Mitchell Layzell
1
Ces fausses transitions ne fonctionnent pas dans IE9 avec le préfixe du fournisseur. -ms- est un préfixe totalement inutile pour les transitions.
DCdaz
1
Voyez-vous -ms- n'importe où également -o- sur l'opéra mobile ne fait pas réellement les transitions, donc son inutile et -moz- pour les versions rapides successives de 2011 est inutile parce que vous parlez littéralement d'une petite poignée d'utilisateurs qui 100% être des développeurs et des institutions n'utilisant pas le Web en tant qu'utilisateur général mais à des fins de plate-forme. Mais l'argument principal reste -ms- est totalement inutile et pas du tout nécessaire. il n'y a pas besoin de -moz- ou -o- Et il n'y a pas besoin à 100% de -ms-
DCdaz
0 

    .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>
Développer l'extrait

Ce code est uniquement pour l'effet de zoom arrière. Réglez le div "img-wrap" en fonction de vos styles et insérez l'effet de zoom arrière des résultats de style ci-dessus. Pour un effet de zoom avant, vous devez augmenter la valeur de l'échelle (par exemple: pour zoom dans, utilisez transform: scale (1.3);

Sreenath
la source
0 
  <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);
}
سیدرسول میرعظیمی
la source
0 

@import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
 body{ font-family: 'Muli', sans-serif; color:white;}
 #lists {
   width: 350px;
   height: 460px;
   overflow: hidden;
   background-color:#222222;
   padding:0px;
   float:left;
    margin: 10px;
 }
 
 .listimg {
   width: 100%;
   height: 220px;
   overflow: hidden;
   float: left;
  
 }
  #lists .listimg img {
   width: 350px;
   height: 220px;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 #lists:hover{cursor: pointer;}
 #lists:hover > .listimg img {
   -moz-transform: scale(1.3);
   -webkit-transform: scale(1.3);
   transform: scale(1.3);
   -webkit-filter: blur(5px);
   filter: blur(5px);
 }

#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}

.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}
<div id="lists">
<div class="listimg">
  <img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>

<div id="lists">
<div class="listimg">
  <img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>
Développer l'extrait

Murat Kezli
la source
0 
<!DOCTYPE html>
<html>
<head>
<style>
.zoom {

  overflow: hidden;
}

.zoom img {
  transition: transform .5s ease;
}
.zoom:hover img {
  transform: scale(1.5);
}

</style>
</head>
<body>

<h1>Image Zoom On Hover</h1>
<div class="zoom">
  <img src="/image-path-url" alt="">
</div>

</body>
</html>
Mohidul
la source
Ajoutez une explication pour supprimer votre réponse d'un message de mauvaise qualité.
Harsha Biyani
-3

Ajoutez la bibliothèque JavaScript jQuery avec jquery.zbox.css et jquery.zbox.js à votre page Web.

<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>

Ajoutez un groupe de vignettes avec des liens pointant vers les images en taille réelle dans la page Web.

<a class="zb" rel="group" href="1.png" title="Image 1">
  <img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
  <img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
 <img src="thumb3.png">
</a>

Appelez la fonction sur le document prêt. C'est ça.

Dans la source de la vue, procédez comme suit:

$(".zb").zbox();
Giri
la source
2
OP a demandé un moyen de le faire en CSS. Une réponse jQuery n'est pas utile ici.
TylerH