Question

我正在寻找一种悬停效果，其中彩色叠加层从一个角（例如右上角）开始，然后缓慢地移动到另一个角（例如左下角）。在此过程中，将填充容器（在本例中为图像容器）。在此示例中，一旦彩色叠加层到达左下角，整个容器将被填充。

处理此问题的最佳纯CSS方法是什么？

这是我正在谈论的示例，但是使用Javascript：https://www.ducasse-paris.com/en。向下滚动到“发现我们生产的咖啡和巧克力”卡。

Answer 1

请记住，Stackemflow不是一个让您完成的事情的询问平台。在这种情况下，您将无法生成自己的代码，却找不到解决它的方法。

这对您来说只是一个小小的入门：

.image-container {
  position: relative;
  line-height: 0;
}

.image {
  max-width: 100%;
  height: auto;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: red;
  opacity: 1;
  transition: 500ms ease-in;
}

.image-container:hover::before {
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

<div class="image-container">
  <img class="image" src="https://placehold.it/600x900">
</div>

悬停效果，其中叠加层从一个角开始，然后慢慢到达另一个角

1 个答案: