我目前正在尝试将鼠标悬停在我的四个图像之一上创建缩放效果。问题是大多数示例通常使用表或掩码div来应用某种效果。
这里有一个例子,实现我想要的this。
非常感谢!!
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; }
解决方法
如何使用CSS3 transform属性和使用scale给出一个放大效果,这样可以这样做,
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); }
这里是一个演示fiddle.我删除了一些元素,使它更简单,你可以总是添加溢出隐藏到.image隐藏缩放图像的溢出。
zoom属性只能在IE中使用