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

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>

CodePudding user response：

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

CodePudding user response：

That's a tough one...maybe do a search for 'overlays'. This will get you started. It's a lot of repetition to do this with html and static css but it will give you control over an instance of .text for each 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>