Я запускаю масонство и все мои сообщения, и я хочу, чтобы заголовок и теги появлялись, когда я наводил курсор на сообщение. Я пытаюсь отобразить заголовок поверх изображения и теги, которые появляются под изображением, и нажимать другие сообщения вокруг него, когда я наводил курсор на сообщение.
Когда я наводил сообщение, заголовок заголовка правильно выталкивает div над ним, но нижний div не отталкивается, а появляется под строкой ниже.
#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>
Я считаю, что вам нужно изменить порядок этих элементов следующим образом.
<div class="post">
<div class="title">Post Title</div>
<div class="details">Post Details</div>
<div class="image2"></div>
</div>
Вы теряете эффект мозаики из-за относительного позиционирования и плавания. Когда :hover
свой элемент в пропорции. Вы можете попробовать играть с позициями. Добавление position:absolute
title
и details
могут быть тем, что вы ищете.