Question

这是我在Nikon网站上发现的非常令人愉悦的效果。当我将鼠标悬停在图像上时，图像会放大。

是否可以使用CSS实现这一目标？如果是这样的话？

Answer 1

CSS悬停的好例子。请参阅变焦＆amp;平移部分：“缩放和平移”

检查this和this链接

/*GROW*/
.grow img {
    height: 300px;
    width: 300px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.grow img:hover {
    width: 400px;
    height: 400px;
}

Answer 2

This可能就像你想要的那样。

Answer 3

此链接可以帮助您 http://www.jacklmoore.com/zoom

缩放将html附加到分配给它的元素中，这样该元素必须能够接受html，例如<a>，<span>，<li>，<div>等。这不包括<img>元素（见下文）。

 $(document).ready(function(){
        $('a.photo').zoom({url: 'photo-big.jpg'});
    });

    // Using ColorBox with Zoom
    $(document).ready(function(){
        $('a.photo').zoom({
            url: 'photo-big.jpg', 
            callback: function(){
                $(this).colorbox({href: this.src});
            }
        });

});

要使用img元素进行缩放，需要使用其他元素进行包装。从JavaScript（基于百分比的宽度和高度，设置为自动的边距等）读取一些与布局相关的CSS样式是不可能的，因此安全的做法是将此更改推迟到各个站点所有者。以下是在某些情况下所需的全部内容：

$(document).ready(function(){
    $('img')
        .wrap('<span style="display:inline-block"></span>')
        .css('display', 'block')
        .parent()
        .zoom();
});

Answer 4

当然可以！ css3的transform: scale()属性与css3过渡相结合非常简单。

.thumbnail:hover img {
     transform: scale(1.15);
    -o-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -webkit-transform: scale(1.15);
}

<强> JSFiddle

当用户将鼠标悬停在图像上时，如何获得图像的缩放效果？

4 个答案: