Search code examples
htmlcssiconssocial-mediaoverlays

social media icons with overlay

i've just made social media icons for my website. i wanted to look them a bit more interesting, so i put overlays on them, which appears, when you moving the hover over it. i've tried to use 

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

but it didn't worked. Link here: http://tdfts.com/projects/akvile_test/

I also tried this (sorry i cannot really explain :D): http://tdfts.com/projects/akvile_test/website/ But this still did not work well, and looked awful in ie and ff.

do not mind the position of the social media bar. the overlay should have a transition.

thank you in advance

Solution

  • 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>

    Hope this will help you ..