jquery - 将鼠标悬停在图像上以显示图标？使用不透明度

Question

我正在寻找有关此效果的好教程:http://chrismahon.com/themes/wook/portfolio/

当您将鼠标悬停在作品集图像上时，不透明度会发生变化并显示一个图标。

如果有人可以提供帮助那就太好了，因为我真的不想窃取代码。

谢谢

Answer 1

不看代码:这很可能不是(CSS)不透明度，只放置 alpha 透明的 PNG。我会做这样的事情:

HTML

<a href="link">
<img src="thumbnail.gif">
<span><img src="hover-icon.png"></span>
</a>

CSS:

a {
  display: block;
  position: relative;
}

a span {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
}

a:hover span {
   display: block;
}

不透明度过渡的变化(对于当前浏览器):

a span {
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    opacity: 0;

    display: block;
    position: relative;
}

a:hover span {
   opacity: 1;
   position: absolute;
   top: 0;
   left: 0;
}