javascript——如何让图像进入CSS和JS的顶层

我希望游戏按钮上的图像在你将鼠标悬停在上面时保持在上面，现在它消失了。我尽量不使用任何HTML，只使用JS和CSS。此外，图像应随悬停效果移动。谢谢

我的CSS代码是

#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://img.hake.cc/other_net_images/other_images_skf/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);
}

这是JS代码。它使CSS工作，但它不是那么重要。

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);