0

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

是否可以使用 CSS 来实现这一点？如果有怎么办？

4

4 回答 4

2

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

检查这个和这个链接

/*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;
}
于 2013-01-03T04:00:09.017 回答
2

这可能是您正在寻找的东西。

于 2013-01-03T04:00:28.087 回答
2

此链接将为您提供帮助 http://www.jacklmoore.com/zoom

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();
});
于 2013-01-03T04:04:52.830 回答
2

你当然可以！将 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

于 2013-01-03T04:13:07.280 回答