html - 将 "SHARE"按钮放置在图像的垂直和水平中心(悬停触发时)

Question

我尝试做的一个很好的例子是 Fancy:http://www.fancy.com/ 如果您将鼠标悬停在帖子的图片上，背景会变暗(按一定百分比)并且前面会出现一个按钮。

我想做同样的事情，但要使用“分享”按钮。我将图像作为 img 放置，并将 SHARE 按钮作为背景。但是，我不知道如何在不使“分享”按钮变暗的情况下使图像变暗。

这是我的 HTML 代码:

<div class="src">
<img src="image.jpg" />
</div>

我的 CSS 代码:

div.src{
    width:100%; 
    height:100%; 
    background:url('icon-share.png') center center no-repeat;
    opacity: 1;
}
div.src img{
    width: 500px;
    min-height: 200px;
    opacity: 0.2;
}

你能帮忙吗？

宽度始终为 500 像素，但高度可变(最小高度为 200 像素)。我还想使图像变暗而不是应用不透明度，但我认为这不是一个难题。

编辑:当然，点击整张图片会打开分享对话框。 float 的分享按钮只是为了通知用户他要分享它。

Answer 1

如果我们讨论的是纯 html 和 css，您可以插入另一个 <div>甚至 <a>在图像上方的图像支架内。

a.share {
    position:absolute;
    width:100%; height:100%;
    background:url(path to icon) rgba(0,0,0,0.75);
    background-repeat: no-repeat;
    background-position:center center;
}