Show a sharing icon on hover on image

Question

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 :

How can i do that ?

Answer 1

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('https://i.sstatic.net/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

Answer 2

You can use following;

HTML:

<div class="image-div">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRH7oGdODLKgm4gaTYHdWDPYLUASSrLYxW4-YDuaZz-iU8jx5_3jg" />
    <img class="hidden_img" src="https://i.sstatic.net/P1ELC.png" width="30" height="30" />
</div>

CSS:

.image-div {
    position: relative;
    float:left;
    margin:5px;}

.image-div:hover .hidden_img
  {
  display: block;
  }

.image-div .hidden_img {
    position:absolute;
    top:0;
    left:0;
    display:none;
}

Here is a working demo: jsfiddle

Answer 3

HTML

<a href="#" class="wrapper">
        <img class="share" src="https://i.sstatic.net/P1ELC.png">
        <img src="http://lorempixel.com/100/100">
</a>

CSS

.wrapper {
    position: relative;
    padding: 0;
    width:100px;
    display:block;
    }
.share {
    position: absolute;
    color:#f00;
    background-color:rgba(255,255,255,0.8);
    width: 100px;
    height: 100px;
    line-height:100px;
    text-align: center;
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.share:hover {
    opacity:1;
}


img {
    z-index:1;
}

CodePen

Answer 4

You can do something like:

HTML

<div class="outer-div">
    <img src="someimage.jpg" />
    <img class="hover-img" src="https://i.sstatic.net/P1ELC.png" width="30" height="30" />
</div>

CSS

.outer-div {
    position: relative;
    float:left;
    margin:5px;}

.outer-div:hover .hover-img
  {
  display: block;
  }

.outer-div .hover-img {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
    display:none;
}

This will show you the hover icon in center of your Image

Answer 5

Or make it even simpler! http://jsfiddle.net/oneeezy/5bDKz/2/

For this you would change my background: black; to background: url("your-image.jpg") no-repeat 0 0;

    div { position: relative; overflow: hidden;  float: left; border-radius: 13em; }
    div img { width: 100px; height: 100px; float: left; position: relative; display: block; }

    /* Hover Effect */
    div:hover:after { content: ""; position: absolute; top: 50%; left: 50%; width: 25px; height: 25px; margin: -15px 0 0 -15px; background: black; border-radius: 3em; border: 2px solid white; }