html - Div 在悬停时插入其他 div

Question

我正在运行 Masonry 和我所有的帖子，我希望当我将鼠标悬停在帖子上时显示标题和标签。我试图在图片顶部显示标题，在图片下方显示标签，并在我将鼠标悬停在帖子上时将其他帖子推到它周围。

当我将鼠标悬停在帖子上时，标题会正确显示将其上方的 div 推开，但底部的 div 不会推开，而是出现在其下方的帖子下方。

Demo

#content {width: 210px; margin: 0 auto; overflow: auto;font-size: 10px;}
.post {width: 50px; padding: 2px 2px; float: left; z-index: 1;}
.post:hover .title {display: block;}
.post:hover .details{display: block;}
.title {display: none; z-index: 999;}
.image1 {width: 50px; height: 50px; border: 1px solid red;}
.image2 {width: 50px; height: 50px; border: 1px solid blue;}
.details {display: none; z-index: 999;}

<div id="content">
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
   <div class="title">Post Title</div>
   <div class="image1"></div>
   <div class="details">Post Details</div>
  </div>
   <div class="post">
   <div class="title">Post Title</div>
   <div class="image2"></div>
   <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image2"></div>
    <div class="details">Post Details</div>
  </div>
  <div class="post">
    <div class="title">Post Title</div>
    <div class="image1"></div>
    <div class="details">Post Details</div>
  </div>
</div>

Answer 1

我相信您需要的是按照时尚改变这些元素的顺序。

<div class="post">
 <div class="title">Post Title</div>
 <div class="details">Post Details</div>
 <div class="image2"></div>    
</div>

由于相对定位和 float ，您正在失去马赛克效果。当:hover你的元素按比例增加。您可以尝试玩位置。将 position:absolute 添加到 title 和 details 可能正是您要寻找的。