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

Question

我正在使用嵌入式测验平台，请参阅 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>

Answer 1

你的意思是这样的吗？

注意:出于安全原因，您在这里看不到结果，所以我创建了一个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>