const cover = document.querySelector('.cover');
const btn = document.querySelector('.close-btn');

btn.addEventListener('click', () => {
  func();
});

function func() {
  cover.classList.toggle('closed');
}

.cover {
  position: sticky;
  display: flex;
  align-items: flex-start;
  height: 275.25px;
  width: 275.25px;
  overflow: hidden;
}

.cover img {
  width: 100%;
}

.close-btn {
  position: relative;
}

@keyframes closeCover {
  0% {
    height: 275.25px;
  }
  100% {
    height: 0px;
  }
}

.cover.closed {
  animation: closeCover 1s linear forwards;
}

<div>
  <div class="cover">
    <img src="https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=" alt="close cover" id="close">
  </div>
  <button class="close-btn">toggle</a>
</div>

.cover {
  position: sticky;
  display: flex;
  align-items: flex-start;
  height: 275.25px;
  width: 275.25px;
}

/* hides the checkbox */
.cover input {
  display: none;
}

.cover label {
  overflow: hidden;
}

#img:checked + label {
  animation: closeCover 1s linear forwards;
}

@keyframes closeCover {
  0% {
    height: 275.25px;
  }
  100% {
    height: 0px;
  }
}

<div class="cover">
  <input type="checkbox" id="img">
  <label for="img"><img src="https://via.placeholder.com/100.jpg"></label>
</div>

.cover {
  position: sticky;
  display: flex;
  align-items: flex-start;
  height: 275.25px;
  width: 275.25px;
}

@keyframes closeCover {
  0% {
    height: 275.25px;
  }
  100% {
    height: 0px;
  }
}

.cover:active {
  animation: closeCover 1s linear forwards;
}

<div class="cover">
  <img src="./images/arrow.svg" alt="close cover" id="close">
  <a href=""><img src="./images/Fiure-de-vie.jpg" alt="cover" id="cover"></a>
</div>