pass an image over another image

.bgs5 {
  height: 600px;
  width: 400px;
  background-image: url(domicilio.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  /* texto  fica á em  cima da imagem  branca*/
  align-items: center;
  /* move para o centro  da outra imagem */
  flex-direction: column;
  /* faz uma coluna para o titulo ficar em  cima */
  position: relative;
  /* posicão  da imagem  branca */
  margin-left: auto;
  margin-right: auto;
  left: 21%;
}

.container {
  position: relative;
  width: 40%;
}

.image {
  position: relative;
  right: 30%;
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid black;
  margin-top: 40%;
}

.overlay {
  z-index: 9999;
  position: absolute;
  top: 38%;
  bottom: 0;
  left: -30%;
  height: 61%;
  width: 100%;
  opacity: 0;
  transition: 1s ease;
  background-color: #008CBA;
  border: 2px solid Black
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

<div class="bgs5">

  <div class="container">
    <img src="entrada.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Entradas</div>
    </div>
  </div>

  <div class="imagem">
    <img src="branco.jpg" width="100%" height="100%" alt="">
  </div>

</div>