在悬停时淡化投资组合图像以显示放大镜或加号等？

Question

我看到一个有趣的图像悬停效果最近被大量使用，并且想知道是否有人对如何最好地创造这种效果有任何提示或建议？

我想创建的是一种效果，因此当您将鼠标悬停在图像上时，图像会消失，放大镜或类似的图标会淡入。突出显示如果您单击图像，它会放大等

以下是效果的一个很好的例子：http://themes.mysitemyway.com/infocus/gallery/portfolio/

任何建议或指示都会很棒！

Answer 1

使用.fadeTo()

实现透明效果

您需要做的就是使用放大镜将图像放在实际照片下，使用css定位并将主图像淡化为0.4

$('.hover_fade').hover(
  function() {
    $(this).fadeTo("slow", 0.4);
  },
  function() {
    $(this).fadeTo("slow", 1);
  }
);

当你在一个类为hover_fade的元素上盘旋时，第一个函数被触发，第二个函数用于当鼠标离开元素时