使用 CSS 创建悬停图像的缩放效果？

Here you go.

Demo

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

Instead of .fader { inline-block; } consider using some grid system. Based on your technology of preference, you can go Foundation, Susy, Masonry or their alternatives.

What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,

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

Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.

zoom property only works in IE

I like using a background image. I find it easier and more 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 with Overlay

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

just want to make a note on the above transitions only need

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

and -ms- certainly doenst work for IE 9 i dont know where you got that idea from.

Simply:

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

This will allow the element to assign an animation via css.

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

This will make it grow!

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


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

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

this way you can zoom any image with simple animation. If you need a complete tutorial here is a official tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Add jQuery JavaScript library together with the jquery.zbox.css and jquery.zbox.js to your webpage.

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

Add a group of thumbnails with links pointing to the full sized images into the webpage.

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

Call the function on document ready. That's it.

In the view source do:

$(".zb").zbox();

SOLUTION 1: You can download zoom-master.
SOLUTION 2: Go to here .
SOLUTION 3: Your own 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"/>

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

This code is only for zoom-out effect.Set the div "img-wrap" according to your styles and insert the above style results zoom-out effect.For zoom-in effect you must increase the scale value(eg: for zoom-in,use transform: scale(1.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);
}

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