如何使用纯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/

仔细查看您指定为演示的网站的来源：

<!-- 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);
}