Show a sharing icon on hover on image


Tags: jquery,html,css

Problem :

I have an image like this :

<img id="item_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRH7oGdODLKgm4gaTYHdWDPYLUASSrLYxW4-YDuaZz-iU8jx5_3jg" alt="" height="333px" width="500px" />

With css :

#item_img:hover {
  opacity: 0.4;
}

With this code, i apply a little opacity on hover. Also, I would like to show in the middle of the image, this sharing icon when the hover is active :

enter image description here

How can i do that ?



Solution :

You could do this using the css psuedo class after. By using after to achive this you don't have to actually add the hover image in the HTML code.

.img-div{position:relative; display: inline-block;}
.img-div:hover:after{
    content:'';
    position:absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background: url('http://i.stack.imgur.com/P1ELC.png') center no-repeat;
    background-size: 50px;
}

.img-div:hover img{opacity: 0.4;}
<div class="img-div">
    <img src="http://placehold.it/150x150"/>
</div>

FIDDLE


    CSS Howto..

    CSS vs jQuery How to create dynamic table style (zebra) without others plugins?

    How to make vertical menu with emenu extension in Yii?

    CSS 'schema' how-to

    How to dynamically modify