Javascript Galeria de fotos com botão em cima em JS

[assinante]

Eu estou tentando construir uma galeria de Filmes, estou usando o Javascript, porém conforme meu código abaixo, o botão de play aparece apenas para o primeiro elemento e caso eu queira fazer aparecer para todos e ter de ficar sempre mudando minha ID e copiando minhas funções.

 

É necessário o uso do Jquery e Boostrap:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

Segue meu projeto:

<style type="text/css">
.col .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
}

.col .btn:hover {
  background-color: black;
}	
</style>


<script>
function showPicture() {
  var play = document.getElementById('play')
  play.style.display = "block";
} 

function disablePicture() {
  var play = document.getElementById('play')
  play.style.display = "none";
} 
</script>


<div class="container">
  <div class="row">
    
    <div class="col">
        <img onmouseover="showPicture()" onmouseout="disablePicture()" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaGDx4J6BXTgqPkXRwhZg9G0swugGe2wNqtXNiZM3omp6SguYV&s" width="relative" height="500">

        <button onmouseover="showPicture()" class="btn" style="display:none;" id="play">Play</button>
    </div>

    <div class="col">
        <img onmouseover="showPicture()" onmouseout="disablePicture()" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaGDx4J6BXTgqPkXRwhZg9G0swugGe2wNqtXNiZM3omp6SguYV&s" width="relative" height="500">

        <button onmouseover="showPicture()" class="btn" style="display:none;" id="play">Play</button>
    </div>

    <div class="col">
        <img onmouseover="showPicture()" onmouseout="disablePicture()" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaGDx4J6BXTgqPkXRwhZg9G0swugGe2wNqtXNiZM3omp6SguYV&s" width="relative" height="500">

        <button onmouseover="showPicture()" class="btn" style="display:none;" id="play">Play</button>
    </div>    

  </div>
</div>

 

[DiF]

@oassinante Não iria funcionar mesmo. Pois não se pode usar o mesmo  ID para os elementos. 

Ou você cria um loop que incrementa  o ID ficando assim:

id="play"

id="play1"
id="play2"
id="play3"

Ou você troca de ID para CLASS. 

Destas duas, é mais fácil usar o a class mesmo.

 

<button onmouseover="showPicture()" class="btn play" style="display:none;">Play</button>

 

function showPicture() {
  var play = document.getElementsByClassName("play");
  play.style.display = "block";
}