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

@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>

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

@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

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

Решение