How to create a hover effect with fading in of a text over image

So...I have this piece of code. I try to create a fading in effect of a text over my image, but I dont know why it doesn't work.

Can anyone explain to me what am I doing wrong?

Here is the code:

.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>

Solution

Your code was actually working, you just applied the hover to the wrong declaration....imagine:hover .text should be .imagine-pozitie:hover .text...I fixed it in snippet below (obviously with placeholder images) :)

   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.sstatic.net/HQMHH.jpg" alt="">
    <img class="imagine" src="https://i.sstatic.net/HQMHH.jpg" alt="">
    <img class="imagine" src="https://i.sstatic.net/HQMHH.jpg" alt="">
  </div></body>


</html>