Cómo crear un efecto hover con fundido de un texto sobre una imagen.

Tengo este fragmento de código. Intento crear un efecto de desvanecimiento en un texto sobre mi imagen, pero no sé por qué no funciona.

¿Alguien puede explicarme qué estoy haciendo mal?

Aquí está el código:

.imagine{
    height: 300px;
    width: 300px;
    margin: 50px;
    border-radius: 50%;
}

.text{
    font-family: Oswald;
    font-weight: bold;
    font-size: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background:#00628B ;
    color: ##15BBFF;
    opacity:0;
    transition:1s;
}

.imagine:hover .text{
    opacity: 1;
}

.imagine-pozitie{
    position: relative;
    display: inline-block;
    text-align: center;
}

<div class="imagine-pozitie">
  <div class="text">
    O ORA
    <div>
      50 DE LEI
    </div>
  </div>
  <img class="imagine" src="poze_site/rec.png" alt="">
  <img class="imagine" src="poze_site/rec.png" alt="">
  <img class="imagine" src="poze_site/rec.png" alt="">
</div>