使用 CSS 在悬停图像上创建缩放效果？
Posted
技术标签:
【中文标题】使用 CSS 在悬停图像上创建缩放效果？【英文标题】：Creating a Zoom Effect on an image on hover using CSS? 【发布时间】：2013-03-23 07:54:51 【问题描述】：我目前正在尝试在将鼠标悬停在我的四个图像之一上时创建缩放效果。问题是大多数示例通常使用表格或掩码 div 来应用某种效果。
这是一个实现我想要的this 的示例。
This 是我目前的代码。
html
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" >
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" >
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" >
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" >
</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;
【问题讨论】：
【参考方案1】：给你。
演示
http://jsfiddle.net/27Syr/4/
HTML
<div id="menu">
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://***.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" >
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://***.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" >
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://***.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" >
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://***.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" >
</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%;
建议
考虑使用一些网格系统，而不是.fader inline-block; 。根据您偏好的技术，您可以选择Foundation、Susy、Masonry 或它们的替代方案。
【讨论】：
【参考方案2】：使用CSS3 transform 属性和使用scale 会产生类似缩放的效果，可以这样做，
HTML
<div class="thumbnail">
<div class="image">
<img src="http://placehold.it/320x240" />
</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);
这是一个演示 fiddle。我删除了一些元素以使其更简单，您可以随时将溢出隐藏添加到.image 以隐藏缩放图像的溢出。
zoom 属性仅适用于 IE
【讨论】：
赢得“从代码中汲取生命的深刻教训”奖后，您的 CSS 正在高呼“一切都很轻松，一切都很轻松”。 如何防止像素化？ @Waltari 您的图像尺寸应该比内容区域大 25%（我们放大的数量），所以如果缩略图是 320x240 而我们放大 25%，图像应该是 400x300 .【参考方案3】：我喜欢使用背景图片。我发现它更简单、更灵活：
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
【讨论】：
我不建议为此使用背景图片，您将失去使用图片标签和 alt 属性带来的所有令人惊叹的图片相关 SEO。 我认为这很好，但你确实失去了 img 标签的所有实用性。 如果图片与 SEO 无关，我发现这个解决方案更干净。【参考方案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;
只是想对上面的转场做个笔记只需要
-webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;
而且 -ms- 当然不适合 IE 9 我不知道你从哪里得到这个想法。
【讨论】：
IE10（第一个支持过渡的稳定版 IE）不需要 -ms- 前缀，以前的不稳定版本需要 -moz- 和 -o-，当前版本不需要需要，但以前的版本需要。 -ms- 完全不需要，因为它没有为任何 IE 浏览器提供解决方案以使转换工作。您使用前缀来让特定规则起作用，而不仅仅是为了好玩。 -ms- 是他们在 IE 10 发布时删除的供应商前缀，这意味着以前的版本如 IE 9 仍然使用供应商前缀，许多人遗憾地使用 IE 9 到今天，现在当它来到transition 属性 IE 正式在 IE 10 中引入了transition，因此它不需要它，但是如果你想 100% 使用 -ms-transition 的不稳定的 IE 9 版本。
那是错误的转换在带有供应商前缀的 IE9 中不起作用。 -ms- 是一个完全没有意义的过渡前缀。
您是否在任何地方都看到 -ms- 以及 -o- 在 Opera mobile 上实际上不会进行转换，因此它毫无意义，而 -moz- 对于快速连续的 2011 版本来说毫无意义，因为您实际上是在说话大约一小部分用户将 100% 成为开发人员和机构，而不是作为普通用户使用网络，而是出于平台目的。但主要论点仍然是 -ms- 完全没用，丝毫不需要。不需要 -moz- 或 -o- 并且 100% 不需要 -ms-【参考方案5】：
简单地说：
.grow transition: all .2s ease-in-out;
这将允许元素通过 css 分配动画。
.grow:hover transform: scale(1.1);
这会让它成长！
【讨论】：
【参考方案6】：.aku
transition: all .2s ease-in-out;
.aku:hover
transform: scale(1.1);
【讨论】：
【参考方案7】：.item:hover img
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
通过这种方式，您可以使用简单的动画缩放任何图像。如果需要完整教程，这里有官方教程：http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
【讨论】：
【参考方案8】：将 jQuery javascript 库与 jquery.zbox.css 和 jquery.zbox.js 一起添加到您的网页中。
<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>
将一组带有指向全尺寸图像的链接的缩略图添加到网页中。
<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>
在文档就绪时调用该函数。就是这样。
在查看源码中做：
$(".zb").zbox();
【讨论】：
OP 要求在 CSS 中做到这一点。 jQuery 答案在这里没有帮助。【参考方案9】：解决方案1：您可以下载zoom-master。 解决方案 2： 转到 here 。 解决方案 3：您自己的代码
.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"
/>【讨论】：
【参考方案10】： .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>此代码仅用于缩小效果。根据您的样式设置div“img-wrap”并插入上述样式结果缩小效果。对于放大效果，您必须增加比例值（例如：放大，使用 变换：比例（1.3）；
【讨论】：
【参考方案11】： <div class="item">
<img src="yamahdi1.jpg" >
<img src="yamahdi.jpg" >
<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);
【讨论】：
【参考方案12】：@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:hovercursor: 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 h1margin:20px; display:inline-block; margin-bottom:0px;
#lists pmargin: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>【讨论】：
【参考方案13】：<!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" >
</div>
</body>
</html>
【讨论】：
添加一些解释以从低质量帖子中删除您的答案。以上是关于使用 CSS 在悬停图像上创建缩放效果？的主要内容，如果未能解决你的问题，请参考以下文章
使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放