html - 在 tumblr 上创建覆盖帖子

Question

我正在尝试学习如何创建tumblr主题，但这很困难。我正在研究一个主题，当您通过创建叠加层将鼠标悬停在每个照片帖子上时显示社交媒体按钮。我无法为每个帖子找出正确的方法。这是我为照片帖子尝试过的代码：

{block:Posts} 
    {block:Photo}
        <div class="post photo smallbox" id="post-{PostID}">
         <img src="{PhotoURL-500}" alt="{PhotoAlt}" id="photo"/>
         <div class="wrapper">
             <div class="content">
                 <div class="likebutton">
                 {LikeButton size="100"}  
                 </div>
                 <div class="repostbutton">
                 {ReblogButton size="100"}   
                 </div>
                 <div class="line"></div>
                 <div class="shareBoxBtn">
                     <a href="http://twitter.com/intent/tweet?url={URLEncodedShortURL}" target="_blank">
                         <span class="shareBoxBtn share_twBtn" style="opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0);"></span>
                         <span class="shareBoxBtnHover share_twBtnHover" style="opacity: 0;"></span>
                     </a>
                     <a href="https://www.facebook.com/dialog/feed?app_id=221438161314294&link={URLEncodedPermalink}&redirect_uri={URLEncodedPermalink}" target="_blank">
                         <span class="shareBoxBtn share_fbBtn" style="opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0);"></span>
                         <span class="shareBoxBtnHover share_fbBtnHover" style="opacity: 0;"></span>
                     </a>
                     <a href="//pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={URLEncodedPhotoURL-500}" target="_blank">
                         <span class="shareBoxBtn share_pinBtn" style="opacity: 1; -webkit-transform: matrix(1, 0, 0, 1, 0, 0);"></span>
                         <span class="shareBoxBtnHover share_pinBtnHover" style="opacity: 0;"></span>
                     </a>
                 </div>   
             </div>
         </div>
        </div>
    {/block:Photo}
{/block:Posts}

Answer 1

试试这个CSS：

#photo{position:relative}
.wrapper{position:absolute}