Question

I have seen on website like pinterest.com and few others that when you hover your mouse over image the facebook share or twiter share signs, number of comments and etc shows up. I have been searching on google and I got answer of doing onmouseover Event, however i think they do something else. can anyone give me a hint or sample of a code. I want to be able when you hover over image you be able to share it with facebook, or twitter or email the image to someone. Thank you

Answer 1

If you want a specific effect, it’s best to inspect the code of the site and see how they do it.

Here is a very basic example that should help you get started:

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <div class="info">
        Stuff here...
    </div>
</div>​

.wrap {
    width:350px;
    height:150px;
    position:relative;
}

.info {
    background:rgba(255, 0, 0, 0.2);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}

.wrap:hover .info {
    opacity:1;
}

jsfiddle