时间戳

首页 > 解决方案 > HTML / CSS：在 flex 中有带有文本的图像。但悬停后，我希望文本改变和线性渐变黑色从上到下透明

html - HTML / CSS：在 flex 中有带有文本的图像。但悬停后，我希望文本改变和线性渐变黑色从上到下透明

问题描述

我现在已经挣扎了一天。一直在看视频和阅读，但我仍然不知道如何管理它。

问题是：

有一个弹性父母。

2 个孩子，每个孩子共享 50% 的屏幕宽度。高度为 200 像素。

在孩子们的内部，我在上面添加了带有文本的图像，并在上面添加了白色透明色作为图层。我在adobe xd中设计了它。在此处插入 1 个带有图像和文字的 flex 孩子的图片：悬停前

悬停后，我希望它创建一个线性等级，其中顶部较暗，底部更透明。在黑暗的一面，我希望出现文字。这是我悬停时来自 adobe XD 的第二张图片：当悬停时

图片上有一个href。

那么我将如何解决这个问题呢？有人可以提供示例代码吗？

我已经尝试对其进行编码。我确实设法让文本悬停，但你们可能有更简单更好的编码方式。

将不胜感激我能得到的所有帮助。坐了几个小时。

更新：更详细

Okey在这里发布代码：

这里也是我正在构建的项目的 XD 文件。如果您将鼠标悬停在显示 MEN 和 WOMAN 的位置，您将看到我想要达到的效果。 Adobe XD 文件

这是我所做的netlify：https ://hopeful-booth-b5fbb7.netlify.app/ 你会看到很多盒子，这只是创建的布局，所以我可以在它们之上构建。您已经可以看到图像有点偏离，但我已经管理了文本悬停。

代码有点乱，这就是为什么我更喜欢构建它：-/

我猜你可以检查代码以获得更好的概览。

Html：main里面的部分。

<section class="one">
    <div class="box4">
      <a href="#" class="link__men-jacket"
        ><span class="text">
          <h1>Click here to go to mens jacket</h1>
        </span>
        <img
          src="img/Men-Style-in-Monsoon.jpg"
          alt="New-Men-Jackets"
          class="new__men--img"
        />
      </a>
    </div>

    <div class="box5"></div>
  </section>

CSS 文件：

.one {
 width: 100%;
 display: flex;
}
 .box4 {
 background-color: indianred;
 height: 200px;
 width: 50%;
}

 .new__men--img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  }

  .link__men-jacket {
   position: absolute;
  }

  .link__men-jacket .text {
   position: absolute;
   z-index: 10;
   opacity: 0;
   transition: all 0.8s ease;
   }

  .link__men-jacket .text h1 {
   margin: 0;
   color: white;
   display: flex;
   align-items: center;
   }

   .link__men-jacket:hover .text {
    opacity: 1;
    display: flex;
    align-items: flex-end;
    }


    .box5 {
     background-color: lemonchiffon;
     height: 200px;
     width: 50%;
     grid-area: box5;
}

标签： htmlcss

解决方案

由于您没有将代码添加到帖子中，因此我无法提供示例代码。如果您添加它，我可以尝试提供帮助。

你想要这样的东西吗？

*{
  margin:0;
  padding:0;
}

.example{
  height: 200px;
  width: 500px;
  border: 3px solid black;
  position: relative;
}

.hover{
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, rgba(128,128,128, 0.8), rgba(0,0,0, 0.8));
  transition: all 1s;
  z-index: 8;
}

.hover:hover {
  opacity: 100;
}

.hover:hover h2{
  opacity: 100;
}

.hover:hover + #white{
  opacity: 0;
}

h2 {
  transition: all 1s;
  opacity: 0;
  color: white;
}

#white{
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 500px;
  background-color:rgba(255, 255, 255, 0.6);
  opacity: 100;
  transition: all 1s;
  z-index: 4;
}

h1{
  position: absolute;
  top: 50%; /* these lines centers text*/
  left: 50%;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="example">
      <img src="https://i.picsum.photos/id/573/500/200.jpg?hmac=QeNNKNuQ4NM0IWz7poy375InmsefvVgUgluVaO2JyUc" alt="">
      <div class="hover">
        <h2>LOREM IPSUM DOLOR</h2>
      </div>

      <div id="white">
          <h1>LOREM</h1>
      </div>
</div>
    <script src="script.js"></script>
  </body>
</html>

推荐阅读