<div class="container">
  <button>Attiva Schermo Intero</button>
  
  <img src="https://source.unsplash.com/600x400/?cat" alt="Immagine di un gatto">
</div>

img {
  display: block;
  max-width: 100%;
  margin: 2rem 0;
}

img::backdrop {
  background: red;
  animation: anima 5s infinite linear paused both;
}

img:hover::backdrop {
  animation-play-state: running;
}

@keyframes anima {
  50% {
    transform: scale(.9);
  }  
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #1b1b1b;
  color: #eee;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

button {
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  background-color: blue;
  cursor: pointer;
}

let fullscreen = document.querySelector("img");
let button = document.querySelector("button");

button.addEventListener("click", () => {
  if (!document.fullscreenElement) {
    fullscreen?.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});