html - 在图像上创建了鼠标悬停缩放效果，首先是模糊，然后是锐利

Question

我添加了类 .fader。一切正常，但在放大图片后，它先变得模糊，然后再锐化。我希望它从一开始就清晰，我该怎么办？

代码如下:

HTML:

<div class="col-sm-4 fader">
   <img class="img-circle img-responsive img-center" src="images/graphicxtemplate4bw.jpg" alt="" onMouseOver= src="images/graphicxtemplate4.jpg" onMouseOut= src="images/graphicxtemplate4bw.jpg" />
</div>

CSS

.fader {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.fader img {
    line-height: 0;
    transition: all 0.5s ease 0s;
}

.fader img:hover {
    opacity: 0.95;
    transform: scale(1.12);
}

Answer 1

如果使用 CSS3 transform 属性并使用 scale 会产生类似缩放的效果，可以这样做，

HTML

<div class="thumbnail">
<div class="image">
    <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
</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 property only works in IE