Работа со слоями

Question

Всем здравствуйте. Нужна ваша помощь. Дали такое задание: "Квадрат разбит на четыре цветовых сектора относительно осей. При попадании курсора на любой сектор он должен плавно расширяться от центра до определенного размера или до момента снятия курсора мыши с сектора. По нажатию на кнопку он должен возвращаться в исходное состояние."

Нужно написать код с использованием тега div и CSS, но я не совсем понимаю как это реализовать

Вот как это примерно должно выглядеть:

Буду очень благодарен за помощь.

Answer 1

За трансформацию элемента отвечает правило transform, в вашем случае тут подойдёт transform: scale(), данное правило назначим для всех цветных элементов при :hover (наведении мышью).

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.grid {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 200px;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
  transition: transform .3s ease;
}

.box:hover {
  transform: scale(1.25);
}

.orange {
  background-color: #ec7c2f;
}

.green {
  background-color: #6eac45;
}

.red {
  background-color: #ff0100;
}

.blue {
  background-color: #599ad5;
}

<div class="grid">
  <div class="box orange"></div>
  <div class="box green"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

Чтобы элементы увеличивались "в разные стороны", как это требует задача, можно использовать правило transform-origin, оно относительно элемента задаёт точку, откуда будет начинаться трансформация элемента, например: оранжевый блок находится в верхнем левом углу, чтобы он увеличивался в ту стороны, нужно указать противоположный угол - нижний правый => transform-origin: right bottom; и так дописываем для остальных по аналогии.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.grid {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 200px;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
  transition: transform .3s ease;
}

.box:hover {
  transform: scale(1.25);
}

.orange {
  background-color: #ec7c2f;
  transform-origin: right bottom;
}

.green {
  background-color: #6eac45;
  transform-origin: left bottom;
}

.red {
  background-color: #ff0100;
  transform-origin: right top;
}

.blue {
  background-color: #599ad5;
  transform-origin: left top;
}

<div class="grid">
  <div class="box orange"></div>
  <div class="box green"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

По нажатию на кнопку он должен возвращаться в исходное состояние.

Этот момент не понятен, опишите подробнее.

Answer 2

Наверное примерно так это делается.

let boxes = document.getElementsByClassName('box');
for(let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("mouseover", e => {
    e.target.style.transform = "scale(1.25)";
  });
  boxes[i].addEventListener("click", e => {
    e.target.style.transform = "scale(1)";
  });
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.grid {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 200px;
}

.box {
  display: block;
  width: 100px;
  height: 100px;
  transition: transform .3s ease;
}

.orange {
  background-color: #ec7c2f;
  transform-origin: right bottom;
}

.green {
  background-color: #6eac45;
  transform-origin: left bottom;
}

.red {
  background-color: #ff0100;
  transform-origin: right top;
}

.blue {
  background-color: #599ad5;
  transform-origin: left top;
}

<div class="grid">
  <div class="box orange"></div>
  <div class="box green"></div>
  <div class="box red"></div>
  <div class="box blue"></div>
</div>

БЛОГ НА HUSL

Работа со слоями

Ответы (2 шт):