Quiero que la imagen en el botón de juegos permanezca en él cuando pasas el cursor sobre él, ahora mismo desaparece. Estoy tratando de no usar HTML, solo JS y CSS. Además, la imagen debe moverse con el efecto de desplazamiento. Gracias.

Mi código CSS es

 #web_element { padding-top: 8%; text-align: center; font-family: monospace; font-color: #8ed4f0; font-size: 26px; position: fixed; top: 5%; left: 5%; width: 20%; height: 8%; background-color: #8ed4f0; border: 2px solid #0f99bb; border-radius: 10px; z-index: 1000; transition: 400ms; } #games_element { padding-top: 8%; text-align: center; font-family: monospace; font-color: #8ed4f0; font-size: 26px; position: absolute; top: 5%; left: 30%; width: 20%; height: 8%; background: url('https://longislandweekly.com/wp-content/uploads/2019/11/Cookie-Monster-cookie-crumbs.jpg') 38% 20%; z-index 2000; border: 2px solid #0f99bb; border-radius: 10px; z-index: 1000; transition: 400ms; } #web_element:hover{ background: #fefefe; box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3); transform: translateY(-20px); } #games_element:hover{ background: #fefefe; box-shadow: 10px 10px 20px 0 rgba(0,0,0,0.3); transform: translateY(-20px); }

Este es el Código JS. Hace que el CSS funcione, pero no es tan importante.

 const web_tab = document.createElement('div'); web_tab.id = 'web_element'; web_tab.textContent = 'Web Browser'; document.body.append(web_tab); const games_tab = document.createElement('div'); games_tab.id = 'games_element'; games_tab.textContent = 'Games'; document.body.append(games_tab);