Увеличить блок при наведении, не трогая другие

@Rider98 · Регистрация: 06.05.2015

Author24 — интернет-сервис помощи студентам

При наведении они все сдвигаются, нужно что бы только увеличился главный, не знаю как сделать как можно проще, подскажите пожалуйста

HTML5

<div class="page-full">
        <div class="block">Какой то блок</div>
        <div class="block">Какой то блок</div>
        <div class="block">Какой то блок</div>
</div>

CSS

.page-full {
    width: 100%;
    background: #ebedee;
    min-height: 100%;
    position: absolute;
}
 
.block{
    position: relative;
    display: inline-block;
    margin: 15px 17px;
    width: 215px;
    height: 260px;
    background: green;
}
 
.block:hover{
    background: blue;
    cursor: pointer;
    padding: 15px;
    box-sizing: padding-box;
}

@mrtoxas · 15.03.2017, 13:28

CSS

.block:hover{
    background: blue;
    cursor: pointer;
    transform:scale(1.1);
    z-index: 1;
}

@Rider98 · 15.03.2017, 13:42 **[ТС]**

Спасибо большое, подскажи ещё пожалуйста, если я добавляю в hover :

CSS

1 2	padding: 50px; box-sizing: border-box;

То почему-то опускаются тоже все блоки, как это можно исправить?

@mrtoxas · 15.03.2017, 14:06

Мой вариант, скорее не подойдет. Приведите приближенный реальному варианту пример. Будут ли какие-то еще стили, кроме цвета блока?

@Rider98 · 15.03.2017, 14:35 **[ТС]**

Кроме цвета необходимо будет менять лишь положение элементов.

@mrtoxas · 15.03.2017, 15:19

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    *{box-sizing: border-box;}
    .page-full {
      width: 100%;
      background: #ebedee;
    }
 
    .item {
      position: relative;
      display: inline-block;
      margin: 15px 17px;
      width: 215px;
      height: 260px;
      background: green;
      transition:transform .2s;
    }
 
    .content {
      position: absolute;
      top:0; left:0;
      width:100%;
      height:100%;
    }
 
    .item:hover {
      transform: scale(1.3);
      background: blue;
      cursor: pointer;
    }
 
    .item:hover .content {
      padding:30px;
    }
  </style>
</head>
<body>
  <div class="page-full">
  <div class="item">
    <div class="content">Какой-то блок</div>
  </div>
  <div class="item">
    <div class="content">Какой-то блок</div>
  </div>
  <div class="item">
    <div class="content">Какой-то блок</div>
  </div>
</div>
</body>
</html>

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	15.03.2017, 14:06	4
	Мой вариант, скорее не подойдет. Приведите приближенный реальному варианту пример. Будут ли какие-то еще стили, кроме цвета блока? 0

@Rider98 11 / 11 / 12 Регистрация: 06.05.2015 Сообщений: 421
	15.03.2017, 14:35 [ТС]	5
	Кроме цвета необходимо будет менять лишь положение элементов. 0

	15.03.2017, 15:19

Увеличить блок при наведении, не трогая другие

Решение