将鼠标悬停在每个图像上的按钮

Question

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

我想让每个图像都在中间居中放置一个“分享按钮”。

Facebook分享代码：

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

我试图通过调用div来display:block;这样使用CSS，但没有奏效。我不确定这是否可能。请记住，我是编码新手。

谢谢大家。

UPDATE： 嵌入的脚本：

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