jquery - 私のウェブ（CSSまたはJQuery）でこの効果を実行するのを手伝ってください

Question

私はウェブをやっていて、このウェブサイトでそのような効果を作りたいです：http: //y2graphic.com/

このウェブでは、「ChủđềHOT」（ホットコンテンツ）という名前のセクションを見ることができます。3つの画像があり、ホバーすると効果が得られます（名前はわかりません）。エフェクトの名前とその作成方法を教えてください。どうもありがとうございました、そして私の悪い英語をお詫びします。

Answer 1

彼らはこの変換属性に CSS3 を使用しています。

HTML

<a href="#" class="thumb">
    <img src="http://y2graphic.com/templates/v2/images/hot/wallpaper.jpg" />
</a>

CSS

.thumb {
    display: block;
    height: 125px;
    overflow: hidden;
    position: relative;
    width: 150px;   
}

.thumb img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.5s ease 0s;
    width: 100%;
    z-index: -1;
}

.thumb:hover img {
    transform: scale(1.2) rotate(5deg);
}

上記のコードを示すフィドルを次に示します。

Answer 2

HTML

<a href="#">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</a>

CSS:

a {
    width: 150px;
    height: 125px;
    display: block;
    overflow: hidden;
    position: relative;
}

a img {
    width: 100%;
    height: 100%;
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

a:hover img {
    -moz-transform: scale(1.2) rotate(5deg);
    -webkit-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}

フィドル: http://jsfiddle.net/kD2v8/