CSS - трансформируйте div, толкая другие div - PullRequest
Новая
       5

CSS - трансформируйте div, толкая другие div

0 голосов
/ 15 января 2020

Я пытаюсь сделать страницу миниатюр с переходом при наведении, который увеличивает масштаб и отображает описание. РЕДАКТИРОВАТЬ: я не хочу использовать jquery.

Проблема 1. Перемещенный div выталкивает соседний div из выравнивания. Все большие пальцы должны оставаться в аккуратных аккуратных рядах.

Задача 2. Подвешенный блок толкает дно контейнера вниз. 

.container {
  margin-top: 75px;
  text-align: center;
  border: 2px solid black;
  padding: 5px;
}

.tn-wrapper {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 5px;
  height: 150px;
  overflow: hidden;
  transition: all 200ms ease-in;
  transform: scale(1);
}

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform: scale(1.5);
  height: 300px;
}

.thumb-box {
  background: lightgray;
  height: 150px;
  width: 150px;
}

.descr-box {
  background: gray;
  height: 150px;
  width: 150px;
}
<div class="container">

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

</div>

Ответы [ 2 ]

3 голосов
/ 15 января 2020

Вы можете обновить свой код, как показано ниже. Вы исправляете выравнивание элементов inline-block (не обязательно, но убедитесь, что они останутся наверху) и настраиваете высоту описания вместо родительского элемента. 

.container {
  margin-top: 75px;
  text-align: center;
  border: 2px solid black;
  padding: 5px;
}

.tn-wrapper {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 5px;
  height: 150px;
  transition: all 200ms ease-in;
  transform: scale(1);
  vertical-align:top; /* added */
}

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

.thumb-box {
  background: lightgray;
  height: 150px;
  width: 150px;
}

.descr-box {
  background: gray;
  height: 0;
  width: 150px;
  overflow:hidden;
  transition: all 200ms ease-in;
}
.tn-wrapper:hover  .descr-box{
  height: 150px;

}
<div class="container">

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

  <div class="tn-wrapper">
    <div class="thumb-box">
      Thumb
    </div>
    <div class="descr-box">
      Description
    </div>
  </div>

</div>
0 голосов
/ 15 января 2020

Я не уверен, что это желаемый вид, который вы пытаетесь достичь, но посмотрите этот пример

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

.container {
 margin-top: 75px;
 text-align: center;
 border: 2px solid black;
 padding: 5px;
 display:flex;
 justify-content:center;
}

.tn-wrapper {
 display: inline-block;
 position: relative;
 border: 0;
 margin: 5px;
 height: 150px;
 transition: all 200ms ease-in;
 transform: scale(1);
 transform-origin:top;
 }

.tn-wrapper:hover {
  z-index: 1;
  transition: all 200ms ease-in;
  transform-origin:top;
  transform: scale(1.5);
  margin:5px 43px 305px 43px;
  }
...