背景css蒙版过渡 - css形状到100％宽度和高度？

Question

我正在努力实现以下目标：

悬停项目

我希望我的容器的背景颜色随着新的过渡而改变。

为此我想用css形状的面具像圆形一样。在悬停项目时，背景形状将缩小为0，然后使用不同的颜色重新缩放为100％。给一点好动画。

我在下面的小提琴中完成了过渡：

https://jsfiddle.net/cvcaa9k9/

然而，由于我希望它具有容器的完整形状，我该如何实现？如果我将圆形设置为100％则无法显示。 。

知道如何做到这一点？基本上，我只需要宽度和高度为100％的形状。 ..

低于我的css：

.element {   
background-color: #c0392b;
color: white;
width:500px; 
height: 500px;
margin: 30px auto;
text-align: justify;
 transition: all 3s ease;
 /* new function syntax for webkit browsers */
 shape-inside: circle(210px);
 -webkit-clip-path: circle(210px);
  shape-padding: 15px;
} 

感谢你所有的时间，我真的很感激！