Cómo crear un efecto de desplazamiento con desvanecimiento de un texto sobre la imagen

Así que... tengo este fragmento de código. Intento crear un efecto de desvanecimiento de 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 class="">
      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>
Answer

Su código realmente funcionaba, simplemente aplicó el cursor a la declaración incorrecta... .imagine:hover .textdebería ser .imagine-pozitie:hover .text... lo arreglé en el fragmento a continuación (obviamente con imágenes de marcador de posición) :)

   body {
      padding: 72px;
      margin: 0 auto;
      font-family: sans-serif;
      ;
    }

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

    }

    .text {

      font-family: Oswald, sans-serif;
      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: all 1s;
    }

    .imagine-pozitie:hover .text {
      font-family: Oswald, sans-serif;
      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: all 1s;
      opacity: 1;

    }


    .imagine-pozitie {

      position: relative;
      display: inline-block;
      text-align: center;

    }
<!DOCTYPE html>
<html>


<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>
  <div class="imagine-pozitie">
    <div class="text">
      O ORA
      <div class="">
        50 DE LEI
      </div>
    </div>
    <img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
    <img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
    <img class="imagine" src="https://i.stack.imgur.com/HQMHH.jpg" alt="">
  </div></body>


</html>

Eso es difícil... tal vez hacer una búsqueda de 'superposiciones'. Esto te ayudará a comenzar. Es mucha repetición hacer esto con html y css estático, pero le dará control sobre una instancia de .textcada hover.

 body {
      padding: 72px;
      margin: 0 auto;
      font-family: sans-serif;
    }

    .imagine-pozitie {
      display: flex;
      flex-direction: row;
    }

    .imagine-1 img,
    .imagine-2 img,
    .imagine-3 img {
      width: 300px;
      height: 300px;
      margin: 50px;
      border-radius: 50%;
      z-index: 0;
    }

    .imagine-1:hover img,
    .imagine-2:hover img,
    .imagine-3:hover img {
      outline: 3px solid #FF6F6F;
      cursor: pointer;
    }


    .text-1,
    .text-2,
    .text-3 {
      font-family: Oswald, sans-serif;
      font-weight: bold;
      font-size: 25px;

      text-align: center;
      background: #00628B;
      color: #15BBFF;

      opacity: 0;
      transition: opacity .5s;
      z-index: 1000;

    }

    .imagine-1:hover .text-1,
    .imagine-2:hover .text-2,
    .imagine-3:hover .text-3 {
      font-family: Oswald, sans-serif;
      font-weight: bold;
      font-size: 25px;

      background: #00628B;
      color: #15BBFF;
      opacity: 1;
      transition: opacity .5s;
      z-index: 1000;
    }
<!DOCTYPE html>
<html>


<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

</head>

<body>

  <div class="imagine-pozitie">


    <div class="imagine-1">
      <div class="text-1">
        O ORA
        <div>
          50 DE LEI
        </div>
      </div>
      <img src="https://i.stack.imgur.com/HQMHH.jpg" alt="" />
    </div>

    <div class="imagine-2">
      <div class="text-2">
        O ORA
        <div>
          50 DE LEI
        </div>
      </div>
      <img src="https://i.stack.imgur.com/HQMHH.jpg" alt="" />
    </div>

    <div class="imagine-3">
      <div class="text-3">
        O ORA
        <div>
          50 DE LEI
        </div>
      </div>
      <img src="https://i.stack.imgur.com/HQMHH.jpg" alt="" />
    </div>

  </div>




</body>


</html>