html - 将鼠标悬停在每个图像上的共享按钮

我正在使用嵌入式测验平台，请参见https://output.jsbin.com/pabopusulo。

我想让每个图像都悬停在中间居中的“共享按钮”。

Facebook分享代码：

<div class="fb-share-button" data-layout="box_count"></div>

我尝试通过将div调用display:block;来使用CSS来执行此操作，但是它没有用。我不确定这是否可能。请记住，我是编码的新手。

谢谢大家

更新：
嵌入式脚本：

<script type="text/javascript" src="//cdn.playbuzz.com/widget/feed.js"></script>
<div class="pb_feed" data-embed-by="6c7dc1a3-ea2c-490e-8b3f-8526cdf5bcb4" data-game="/drishtib10/what-is-your-personality-type-according-to-your-perception" data-recommend="false" data-game-info="false" data-comments="false" data-shares="false" ></div>

最佳答案

你的意思是这样吗？

注意：由于安全原因，您在这里看不到结果，因此我为此创建了bin。

.wrapper {
  position:relative;
  display:inline-block;
}

.wrapper:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  opacity:0;
  transition: all .3s ease;
}

.fb-share-button.fb_iframe_widget {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index:1;
  transition:all .3s ease;
}

.wrapper:hover .fb-share-button.fb_iframe_widget,
.wrapper:hover:before {
  opacity:1;
}

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=850697865046018";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="wrapper">
  <img src="https://pixabay.com/static/uploads/photo/2016/03/06/16/51/balance-1240737__180.jpg" />
  <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div>
</div>

关于html - 将鼠标悬停在每个图像上的共享按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35836573/