如何在褪色的响应图像上显示动画文本

Question

我有以下代码可以在页面上显示一些图像响应。

<!DOCTYPE HTML>

<html>

<head>
  <title>Test page</title>
  <style>
.wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  gap: 10px;
}

.item {
  border: 2px solid gray;
  display: flex;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}


.item.large {
  grid-column: 3 / 3; 
  grid-row: 1 / span 2;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

  </style>
</head>

<body>
<div class="wrapper">
  <div class="item"><img src="img.jpg" /></div>
  <div class="item"><img src="img.jpg" /></div>

    <div class="item large">
      <img src="img2.jpg"/>
    </div>

  <div class="item"><img src="img.jpg" /></div>
  <div class="item"><img src="img.jpg" /></div>
</div>

</body>

</html>

我正在尝试弄清楚 img2.jpg 我如何才能达到此处显示的相同效果 https://www.w3docs.com/tools/code-editor/4132

但是我很难让它工作，有人可以告诉我如何实现吗？

Answer 1

给你：

<!DOCTYPE HTML>

<html>

<head>
  <title>Test page</title>
  <style>
.wrapper {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
  gap: 10px;
}

.item {
  border: 2px solid gray;
  display: flex;

  /*testing purposes*/
  min-height: 250px;
}

.item img {
  object-fit: cover;
  max-width: 100%;
  height: auto;
}


.item.large {
  grid-column: 3 / 3; 
  grid-row: 1 / span 2;

  /*added*/
  position: relative;
}
/*added*/
.item.large .fade {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.438);
    opacity: 0;

    transition: all ease-in-out .4s;
}
.item.large .fade p {
    width: 100%;
    text-align: center;

    transition: all ease-in-out .4s;
}
.item.large:hover .fade {
    opacity: 1;
}
.item.large:hover .fade p {
    margin-top: 150px;
}

@media only screen and (max-width: 768px) {
  .wrapper {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
  .item.large {
    grid-column: auto;
    grid-row: auto;
  }
  .item img {
    width: 100%;
  }
}

  </style>
</head>

<body>
<div class="wrapper">
  <div class="item"><img src="img.jpg" /></div>
  <div class="item"><img src="img.jpg" /></div>

    <div class="item large">
        <div class="fade"><p>animated text</p></div>
        <img src="img2.jpg"/>
    </div>

  <div class="item"><img src="img.jpg" /></div>
  <div class="item"><img src="img.jpg" /></div>
</div>

</body>

</html>

说明：我使 .Item.large 容器成为相对的，因此它可以包含绝对元素。然后我添加了带有文本的绝对元素 .fade 。我最初将它设为 opacity: 0;，在 0.4 秒内将过渡动画设为 ease-in-out，然后在 hover 上将其设为 opacity: 1;，这使其可见并为文本添加边距，使其看起来就像它在滑动。享受。

如何在褪色的响应图像上显示动画文本

How can I display animated text over faded responsive image

css