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

50
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;
}

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

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

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

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

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

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

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

57
Как передать конструктор из класса от которого не наследоавл

Как передать конструктор из класса от которого не наследоавл

как классу C передать конструктор от A если он уже наследует от B ? желательно пример с функцией call или bind

42
Как скрыть данные в js?

Как скрыть данные в js?

Хочу зашифровать пароль в JsВсе отлично правда в хроме он палится на раз-два через консоль

43