將鼠標懸停在每個圖像上的按鈕

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>