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

Answer 2

我延长了rotora的答案

.imageLink {
   display: block;
   position: relative;
}

.imageLink .zoomIcon {
   display: hidden;
   position: absolute;
   top: 0;
   left: 0;
}

$(".imageLink").hover(function(){
    $(this).children(".zoomIcon").fadeIn();
},function(){
    $(this).children(".zoomIcon").fadeOut();
});

将鼠标悬停在图片上可以显示图标？使用不透明度

2 个答案: