html - 带有覆盖的社交媒体图标

我刚刚为我的网站制作了社交媒体图标。我想让它们看起来更有趣，所以当您将鼠标悬停在上面时，我会在上面放上覆盖层。
我试图用

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

但是没有用。在此处链接：http://tdfts.com/projects/akvile_test/

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

不要介意社交媒体栏的位置。
叠加层应具有过渡效果。

先感谢您

最佳答案

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>

希望对你有帮助 ..