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/

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

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