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

Question

我希望创建一个悬停效果，其中彩色叠加从一个角(例如右上角)开始，然后慢慢移动到另一个角(例如左下角)。在此过程中，将填充容器(在本例中为映像容器)。在此示例中，一旦彩色覆盖层到达左下角，整个容器将被填充。

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

以下是我所说的一个例子，但使用Javascript：https://www.ducasse-paris.com/en。向下滚动到"了解我们的咖啡和巧克力制造商"卡片。

Answer 1

请记住，Stackoverflow不是一个要求你完成事情的平台。这是当您陷入生成自己的代码并且找不到修复它的方法时。

这对您来说只是一个小小的开端：

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