0

これは、ニコンのサイトで見つけた非常に視覚的に楽しい効果です。画像にカーソルを合わせると、画像が拡大する傾向があります。

CSSを使用してこれを達成することは可能ですか? もしそうなら、どのように？

4

4 に答える 4

2

このリンクはあなたに役立ちます http://www.jacklmoore.com/zoom

<a>Zoom は、割り当てられた要素内に html を追加するため、要素は、<span>、<li>、などのhtml を受け入れることができる必要があります<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

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

できますよ！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 に答える