Задание 3 - Flexbox

Вариант 3:

Результат:

ОЧИСТИТЬ

Исходный код HTML:

<div class="flex-container">
  <div class="flex-label"></div>
  <div class="flex-item state1"></div>
</div>
<button class="button" onclick="main()">ОЧИСТИТЬ</button>

Исходный код CSS:

.flex-container {
  height: 250px;
  position: relative;
  display: flex;
}

.flex-container .flex-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
}

.flex-item {
  margin: auto;
}

.state1 {
  content: url("images/lab3/ilon1.png");
}

.state2 {
  content: url("images/lab3/ilon2.png");
}

.state3 {
  content: url("images/lab3/ilon3.png");
  transform: translate(100px, -100px);
  transition: 1s;
  filter: sepia(100);
}

Исходный код JS:

function setLabel(text) {
  document.getElementsByClassName("flex-label")[0].innerHTML = text;
}

function main() {
  let el = document.getElementsByClassName("flex-item")[0];
  el.classList.remove("state2", "state3");
  el.classList.add("state1");
  setLabel("");

  el.onmouseover = function(ev) {
    ev.target.classList.remove("state1");
    ev.target.classList.add("state2");

    setLabel("Как тебе такое?");
    el.onmouseover = null;
  }

  el.onclick = function(ev) {
    ev.target.classList.remove("state2");
    ev.target.classList.add("state3");

    setLabel("Это еще не тесла :)");
  }
}