jquery - 純粋な CSS と jQuery を使用して写真を拡大および着色する方法

Question

これは jQuery ベースではないと感じていますが、意見を求めているだけです。マウスオーバーすると、ゴルフ プレーヤーがわずかにフェードアウトし、写真のサイズが拡大され、ぼやけてテキストが表示されることに注目してください。私は本当にそれをしたいです。

http://www.kevinsprecher.com/

このマウスオーバー効果をストレート jQuery/CSS でキャプチャすることは可能ですか?

Answer 1

on :hover を使用すると、純粋な CSS で目的の効果を得ることができます。古いブラウザー (IE8 など) でのサポートが必要な場合は、jQuery を使用してください。

次のリソースを確認してください。

• ズーム効果: http://css-tricks.com/almanac/properties/z/zoom/
• 画像のぼかし: http://www.inserthtml.com/2012/06/css-filters/
• 画像を移動する場合: http://www.css3.info/preview/css3-transitions/

デモとして指定した Web サイトのソースを詳しく見てみましょう。

<!-- Source of http://www.kevinsprecher.com/ -->
<div class="c-mb-con" style="position: absolute; top: 0px; left: -610px; display: none; z-index: 4; opacity: 1; width: 610px; height: 325px;">
    <a href="online-golf-lessons.html">
        <div class="ban-ro">
            <h2>Improve You Game With Our Online Golf Lessons.</h2>
            <div class="blog-arrow"><span>+</span>Learn More</div>
        </div>

        <img src="http://imavex.vo.llnwd.net/o18/clients/kevinsprecher/images/Main_Banner/online-golf-lessons.jpg" alt="Improve You Game With Our Online Golf Lessons." title="Improve You Game With Our Online Golf Lessons." width="610" height="325">
    </a>
</div>

…および関連する CSS ソース:

#c-mb a img {
    width: 110%;
    height: 110%;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

#c-mb a:hover img, #c-mb a:active img {
    display: block;
    width: 610px;
    height: 325px;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}