Как при увеличении одного блока сделать так чтобы он не толкал другой блок
226
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;
}
Тогда картинка будет просто наезжать.
-
07:09
-
17:51
-
08:01
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46678 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30287 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22841 visits
- Как через css изменить цвет png изображения? 10164 visits
- Blob video url download 9800 visits
- Php curl запрос через прокси с авторизацией 9059 visits
- Работа с captcha vk api 7977 visits
© "hostciti.net" 26.4.2024 | 16:41