Div толкать другие divs при наведении

0

Я запускаю масонство и все мои сообщения, и я хочу, чтобы заголовок и теги появлялись, когда я наводил курсор на сообщение. Я пытаюсь отобразить заголовок поверх изображения и теги, которые появляются под изображением, и нажимать другие сообщения вокруг него, когда я наводил курсор на сообщение.

Когда я наводил сообщение, заголовок заголовка правильно выталкивает 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>
Теги:

1 ответ

1

Я считаю, что вам нужно изменить порядок этих элементов следующим образом.

<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 могут быть тем, что вы ищете.

  • 0
    Это не помогает. Я хочу, чтобы детали отображались под изображением, а не под заголовком.
  • 0
    результат Это результат по умолчанию вашего сообщения. Подробности под изображением. Разве это не то, что вы хотите?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню