Как при увеличении одного блока сделать так чтобы он не толкал другой блок

248

14 июня 2018, 06:30

Возможно ли сделать так, чтобы при увеличении одного блока он не толкал другой блок без использования position: absolute? Как видите я тут поставил еще margin-top: 200px, но он всё равно толкает вниз h1.

У меня такая ситуация, что в верстке увеличивается целый блок громадный, а ему position: absolute нельзя задать. Рассматриваются любые другие варианты.

img { 
  width: 100px; 
  transition: width 1s ease-in-out; 
} 
 
img:hover { 
  width: 200px; 
} 
 
h1 { 
  margin-top: 200px; 
}

<div class="img-block"> 
  <img src="https://i.stack.imgur.com/8tfMV.png"> 
</div> 
<div class="another-element"> 
  <h1>another element</h1> 
</div>

Answer 1

Можно с помощью transform: scale(n);

img { 
  width: 100px; 
  transition: transform 1s ease-in-out; 
  transform-origin: 0 0 0; 
} 
 
img:hover { 
  transform: scale(2); 
} 
 
h1 { 
  margin-top: 200px; 
}

<div class="img-block"> 
  <img src="https://i.stack.imgur.com/8tfMV.png"> 
</div> 
<div class="another-element"> 
  <h1>another element</h1> 
</div>

Answer 2

Не совсем понятно что вам нужно. Но как вариант, можете задать:

.img-block{
  max-height:100px;
}

Тогда картинка будет просто наезжать.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подключение less (выдает ошибку в браузере)

Первый раз подключаю lessвсе работает, но в хроме ошибки выдает

221

javascript

Отправка данных с формы в формате JSON на сервер

надо отправить на сервер данные введенные в контактной формы на сайте, в формате JSON (на сервере CORS запрос разрешен) при отправке получаю Status...

237

javascript