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

#css #css3

Возможно ли сделать так, чтобы при увеличении одного блока он не толкал другой блок
без использования 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;
}

  


  
another element




    

Ответы

Ответ 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;
}

  


  
another element



Ответ 2

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

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


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