如何通过在图像上淡入文本来创建悬停效果答案

【问题标题】：How to create a hover effect with fading in of a text over image如何通过在图像上淡入文本来创建悬停效果
【发布时间】：2022-01-06 17:27:27
【问题描述】：

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

谁能向我解释我做错了什么？

代码如下：

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

【问题讨论】：

标签： html css hover fade

【解决方案1】：

您的代码实际上正在运行，您只是将悬停应用到了错误的声明....imagine:hover .text 应该是.imagine-pozitie:hover .text...我在下面的 sn-p 中修复了它（显然使用占位符图像）:)

   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>

【讨论】：

非常感谢，下次会注意的，呵呵
但是你能帮我把这个悬停应用到每张图片上，而不仅仅是整个 div 上吗？
好的，我将在下面的单独答案中添加解决方案。

【解决方案2】：

这是一个艰难的...也许搜索“覆盖”。这会让你开始。使用 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>

【讨论】：