Html 悬停颜色使标题不可读

我正在尝试实现一种效果，就像在这个网站上，当内容悬停在它上面时，黄色会消耗它，标题的颜色也会改变。当我试图重新创建此效果时，我的标题变得不可读。jsfiddle.net/m8Z25

.content1:hover, .content2:hover, .content3:hover, .content4:hover, .content5:hover, .content6:hover
{
    background-color: white;
    opacity: 0.30;
    transition: .2s;
    webkit-transition: .2s;
   -webkit-transition: all 500ms ease;
}

h1:hover
{
    color: black;
}

h2
{ 
   color: red;
   position:absolute;
   bottom: -10;
   padding-left: 30;
}

h1
{
    color: black;
}

---

现在还不是100%清楚你在这里想要实现什么

据我所知。它几乎不可读，因为您正在向内容容器添加不透明度。这会影响所有内容（包括背景），因此所有内容都会褪色

这取决于内容容器（网站背景）背后的内容

您演示的站点不使用不透明度来更改任何内容。我想它只是将背景颜色从浅紫色更改为深紫色

尝试删除

不透明度：0.30并更新背景/文本颜色

请参阅仅更改颜色与使用不透明度的示例…
我很困惑，您的问题是什么？你能试着做点什么让我们看看你在做什么吗？我觉得我的描述不太好。这是JSFIDLE，谢谢。