Show a sharing icon on hover on image

Tags: jquery,html,css

Problem :

I have an image like this :

<img id="item_img" src="" 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;}
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    background: url('') center no-repeat;
    background-size: 50px;

.img-div:hover img{opacity: 0.4;}
<div class="img-div">
    <img src=""/>


    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