How to display a list on the button when hovering over button - list

Question

I have a button and I want to make a name of the button disapear when you hover over it. At the same time I want the background to change and show a list on the button.
.buttons{
width: auto;
position:horizontal;
font-size: 0;
background-color: darkslategrey;
border-radius: 10px;
}
.buttons .btn-1{
display:inline-block ;
border-radius: 8px;
background-image: url("/img/teatritood.JPG");
cursor: pointer;
background-size: 100%;
border: none;
padding:none;
height: 30rem;
width: 33.3%;
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 30px;
box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey;
}
.btn-1:hover{
background-image: url("/img/teatritood.JPG");
cursor: pointer;
transition-duration: 0s;
background-size: 100%;
border: none;
padding:none;
width: 30.33%;
height: 30rem;
font-size: 0px;
box-shadow: none;
box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey;
}
.btn-1:hover::after{
display: block;
content: attr(data-hover);
font-family: 'Courier New', Courier, monospace;
color: whitesmoke;
font-display: bold;
font-size: 38px;
transform: rotateY(180deg);
}
<pre>
<section>
<div class="buttons">
<div>
<button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
<button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
<button type="button" class=btn-3 data-hover="Uus list">Muud</button>
</div>
</div>
</section>
<div class="hidden-list">
<div>
<ul>
<ul><a>Projektid</a></ul>
<ul>Kirjeldused</ul>
<ul>Pildid</ul>
</ul>
</div>
</div>
</pre>