带有叠加层的社交媒体图标

Question

我刚刚为我的网站制作了社交媒体图标。我想让它们看起来更有趣，所以我在它们上面放置了叠加层，当你将鼠标悬停在上面时就会出现。 我试过用

#bla:hover {
background-image: overlay.png;
} 

但它没有奏效。链接在这里：http://tdfts.com/projects/akvile_test/

我也试过这个（对不起，我无法解释：D）：http://tdfts.com/projects/akvile_test/website/ 但这仍然不能很好地工作，并且在 ie 和 ff 中看起来很糟糕。

不要介意社交媒体栏的位置。 叠加层应该有一个过渡。

提前谢谢你

Answer 1

Demo..

CSS

.social-item{
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    float: left;
    margin: 5px;
}
.social-item .original{
    width: 100%;
    height: 100%;
}
.social-item .over{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.social-item:hover .over{
    opacity: 1;
}

HTML

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fb.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/fbhover.png" class="over" />
</div>

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitter.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/twitterhover.png" class="over" />
</div>

<div class="social-item">
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/google.png" class="original" />
    <img src="http://tdfts.com/projects/akvile_test/website/img/socialmedia/googlehover.png" class="over" />
</div>

希望这会对你有所帮助..

Answer 2

根据你上面的风格，你应该使用而不是那个

#bla:hover {
background-image: url('overlay.png');
} 

里面的url应该有正确的位置。

关于位置，你需要让包含overlay.png的div是绝对的。 [位置：绝对；顶部：0;]

并确保父 a 应该是相对的或绝对的

Answer 3

你有

#fb {
    height: 40px;
    width: 40px;
    background-image: url(img/socialmedia/fbhover.png);
}

在您的 style.css（第 72 行）中，这会导致自动应用 background-image。相反，你会想要这样的东西：

#fb {
    height: 40px;
    width: 40px;
}

#fb:hover {
    background-image: url(...);
}

但是，我怀疑这是您想要的。在<img src="foo.png"> 上设置background-image 只会在foo.png 后面显示background-image，我猜你想完全替换图像。

所以你有两个选择：

1) 更简单：使用 jQuery 的 .hover() 和 .attr("") 更改 src 的 src 与 Javascript。

2) Harder / Uglier（但不需要 JS）：制作两个 div，一个在另一个之上。使您的默认图像位于底部，悬停图像位于顶部。将顶部 div 的不透明度设置为 0，然后执行 CSS :hover 选择器，将顶部 div 的不透明度更改为 1。坦率地说，我会选择第一个选项。

Answer 4

你可以应用一些 CSS，就像我为 facebook 覆盖所做的那样

#overlayfb {
position: absolute;
height: 40px;
width: 40px;
z-index: 1;
background-image: url(img/socialmedia/fbhover.png);
top: -25px;
}

顶部在 -25px;

使用这个 #overlayfb：悬停{ 顶部：-25px； }

我认为它对你有用