0

Мне нужно, чтобы при наведении курсора на блок он увеличивался вправо и наверх как бы. Я сделал так:

css:

.test {
    background:gray;
    width:200px;
    height:200px;
 cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}
.test:hover {
         transform-origin: left top;
    margin-top: -10px;
    margin-left: 20px;
  transition: margin-left 130ms;
  transition: margin-top 130ms;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.4);
}

html:

<div class="test">TEST</div>

но почему-то не работает. Как сделать отступ, чтобы при наведении блок как бы увеличивался т.е как бы становился больше? Как на этой картинке. Тут 4 блока и видно насколько первый блок больше при наведении. Мне нужно прям как там, помогите если можете.

2 ответа 2

3

Используй transform: scale()

С помощью функции scale() свойства transform можно увеличивать и уменьшать объекты на веб-странице. Принцип работы заключается в масштабировании элемента по горизонтали и вертикали с указанием коэффициента масштабирования. Пример:

transform: scale(3); /* пропорциональное увеличение элемента в 3 раза */

transform: scale(0.5); /* пропорциональное уменьшение элемента наполовину */

4
  • @CapitalNemo я написал так вы сказали, и это помогло, но блок прозрачный, то есть как сделать перекрывание? Чтобы он перекрывал нижний блок? Спасибо.
    – Timur
    3 мар 2019 в 11:46
  • Чтобы сделать один блок поверх другого нужно использовать для них обоих position: relative; z-index: 1; Вот как здесь: htmlbook.ru/css/z-index 3 мар 2019 в 11:50
  • @CapitalNemo, не помогло почему-то(
    – Timur
    3 мар 2019 в 11:53
  • htmlacademy.ru/courses/45/run/19 Пример как блок перекриваєт другой 3 мар 2019 в 12:08
1

Что-то такое желаете получить?

.content {
  display: block;
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

.item {
  display: inline-block;
  float: left;
  width: calc(50% - 10px);
  min-height: 120px;
  height: 40vh;
  margin-right: 10px;
  margin-bottom: 10px;
  background: green;
  transition: transform .15s;
}

.item:hover {
  transform: scale(1.5);
  background: red;
  z-index: 1;
  transition: transform .5s;
}

.item.l-t {
  transform-origin: left top;
}

.item.r-t {
  transform-origin: right top;
}

.item.l-b {
  transform-origin: left bottom;
}

.item.r-b {
  transform-origin: right bottom;
}
<div class="content">
  <div class="item l-t"></div>
  <div class="item r-t"></div>
  <div class="item l-b"></div>
  <div class="item r-b"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.