Как сделать анимации появления картинок при нажатии на кнопку?

Question

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

function showElement() {
  element = document.querySelector('.container');
  element.style.visibility = 'visible';
}

function hideElement() {
  element = document.querySelector('.container');
  element.style.visibility = 'hidden';
}

.knopka {
  text-align: end;
}

.kn {
  margin-top: -55px;
  margin-right: 350px;
}

.kn button {
  color: #4E4E4E;
  border-radius: 5px;
  background-color: #F7F7F7;
  font-size: 15px;
  border: none;
  width: 200px;
  height: 40px;
}

.container {
  justify-content: center;
  display: flex;
}

.scr41 img {
  margin-top: 70px;
  width: 140px;
}

.scr51 img {
  margin-top: 70px;
  width: 140px;
}

.kn1 {
  margin: -40px 140px;
}

.kn1 button {
  color: #4E4E4E;
  border-radius: 5px;
  background-color: #F7F7F7;
  font-size: 15px;
  border: none;
  width: 200px;
  height: 40px;
}

.kn button:hover {
  background-color: #ffa34857;
  color: rgb(0, 0, 0);
  transition: all 0.6s ease;
}

.kn1 button:hover {
  background-color: #ffa34857;
  color: rgb(0, 0, 0);
  transition: all 0.6s ease;
}

<div class="knopka">
  <div class="kn">
    <button onclick="showElement()"> 
      Показать больше 
    </button>
  </div>

  <div class="kn1">
    <button onclick="hideElement()"> 
      Скрыть
    </button>
  </div>

  <div class="container">
    <div class="scr41" id="scrr">
      <img src="/Untitled (5)/Group 10.png">
    </div>

    <div class="scr51" id="scrr">
      <img src="/Untitled (5)/Group 11.png">
    </div>

    <div class="scr51" id="scrr">
      <img src="/Untitled (5)/Group 12.png">
    </div>

  </div>
</div>

БЛОГ НА HUSL

Как сделать анимации появления картинок при нажатии на кнопку?

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