如何用純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> 

＆hellip;以及相關的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); 
}