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

Question

我有这样的图像：

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

使用css：

#item_img:hover {
  opacity: 0.4;
}

使用此代码，我在悬停时应用了一点不透明度。另外，我想在图像中间显示悬停处于活动状态时的共享图标：

我该怎么做？

Answer 1

您可以使用以下内容;

<强> 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;
}

以下是一个有效的演示： jsfiddle

Answer 2

您可以使用css psuedo class after执行此操作。 通过使用after来实现这一目标，您不必在HTML代码中实际添加悬停图像。

＆＃13;

＆＃13;

.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;}

＆＃13;

<div class="img-div">
    <img src="http://placehold.it/150x150"/>
</div>

＆＃13;

＆＃13;

＆＃13;

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

您可以执行以下操作：

<强> 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;
}

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

Answer 5

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

为此你会改变我的背景：黑色;到背景：url（＆＃34; your-image.jpg＆＃34;）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; }