如何通过淡入淡出图像上的文本来创建悬停效果

Question

所以...我有这段代码。我尝试在我的图像上创建文本效果的淡入淡出，但我不知道为什么它不起作用。

任何人都可以向我解释我做错了什么吗？

代码如下：

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

您的代码确实有效，您只是将悬停应用于错误的声明....imagine:hover .text 应该是 .imagine-pozitie:hover .text...我在下面的代码片段中修复了它（显然是使用占位符图像） :)

   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>

Answer 2

这很难...也许搜索 'overlays'。这会让你开始。使用 html 和静态 css 执行此操作需要重复很多次，但它会让您在每次悬停时控制 .text 的一个实例。

 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>

如何通过淡入淡出图像上的文本来创建悬停效果

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

html

css

hover

fade