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

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 :

用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 ?

我怎样才能做到这一点 ？

5 个解决方案

#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.

您可以在之后使用css psuedo类执行此操作。通过使用after来实现此功能，您无需在HTML代码中实际添加悬停图像。

.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

小提琴

#2

You can use following;

你可以使用以下;

HTML:

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:

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

这是一个工作演示：jsfiddle

#3

HTML

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

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

CodePen

#4

You can do something like:

你可以这样做：

HTML

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

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

这将显示图像中心的悬停图标

#5

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

或者让它更简单！ http://jsfiddle.net/oneeezy/5bDKz/2/

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

为此你会改变我的背景：黑色;到背景：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; }