How to make a box and a box in this box

Well I wanted to create a box where when clicked a hoover appears and it has a link: ex:

withhoover:

Howisminesofar:

htmlcode:

<sectionid="promo">
       <?php
                $consulta = $pdo->prepare("SELECT * FROM produtohome");
                $consulta -> execute();

                $linhas = $consulta -> rowCount();

                foreach($consulta as $mostra):
            ?>
            <div class="card">
              <img class="skin"src="images/<?= $mostra['produto_img']?>" alt="Nome da Empresa: <?= $mostra['produto_nome']?>" title="Nome da Empresa: <?= $mostra['produto_nome']?>">
              <h1 class="color-white text-center font-text-light-med font-weight-heavy bgcolor-black"><?= $mostra['produto_nome']?></h1>
              <p class="bgcolor-gray text-center color-dark-full font-text-light-med">Por: R$ <?= number_format($mostra['produto_preco'], 2,',','.')?></p>
              <button class="bgcolor-red text-center btn"><a href="comprar.php?prod=<?= $mostra['produto_id']?>">Comprar</a></button>
            </div>
            <?php endforeach; ?>

        </section>

css:

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  height: 300px;
  text-align: center;
  font-family: arial;
}
.skin {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
  font-family: arial;
}
.price {
  color: grey;
  font-size: 22px;
}

.card button {
  border: none;
  outline: 0;
  margin-top: 10px;
  height: 30px;
  color: black;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.2);;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.card button:hover {
  opacity: 0.7;
}