How to make a box and a href in this box

Question

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

with Hoover:

as is mine so far :

html code:

 <section id="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;
}

Answer 1

Dude I don’t know if this is exactly what you need, but I put some attributes on the card to make the red "edge" with a outline. And the internal content I created a div which remains hidden and :hover in the card this content appears.

See how it looked in the example.

.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;
  box-sizing: border-box;
}
.card:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  outline: 4px solid red;
}
.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;
}

.card .info {
  opacity: 0;
  height: 0px;
  line-height: 0px;
  background-color: #000;
  color: #fff;
  text-align: center;
  transition: all 500ms;
}
.card:hover .info {
  opacity: 1;
  height: 50px;
  line-height: 50px;
}

<section id="promo">

    <div class="card">
      <img class="skin"src="https://placecage.com/100/100" alt="Nome da Empresa: 
      <?= $mostra['produto_nome']?>" title="Nome da Empresa: <?= $mostra['produto_nome']?>">
      <div class="info">
        <span>conteúdo</span>
      </div>
      <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>