在图像上的鼠标悬停时显示共享图标

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 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="http://i.stack.imgur.com/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 2

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

Answer 3

HTML

<a href="#" class="wrapper">
        <img class="share" src="http://i.stack.imgur.com/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="http://i.stack.imgur.com/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; }