Html 纯CSS将鼠标悬停在div上，隐藏内容，然后显示新文本

我想在div列元素中显示一些内容（一个图标和一些标题文本）。当我将鼠标悬停在文本上时，我试图通过在旧内容上转换一个框来隐藏内容，然后在新的颜色上显示更多信息

我目前正在使用：before psuedo元素来转换一个新的背景色，最初为0不透明度，然后向上转换为完全不透明度。我似乎无法让我的孩子们在上面表演

功能{
位置：相对位置；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
填充：5%；
文本对齐：居中；
框大小：边框框；
}
.特征h2{
字号：1.5em；
颜色：#006699；
边际上限：0；
边缘底部：0.5em；
}
.特色a{
文字装饰：无；
}
.feature.icon{
字号：3em；
颜色：#575757；
}
.特点：以前{
内容：“；
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
身高：0；
背景色：#003366；
过渡：所有0.33秒缓解；
z指数：10；
}
.特色.详情{
显示：无；
z指数：15；
}
。功能：悬停：在{
身高：100%；
不透明度：1；
盒影：嵌入0px 0px 2px 2px rgba（751792190.75）；
z指数：10；
}
。功能：悬停。详细信息{
显示：块；
颜色：#fff；
}

主标题
主标题（再次）
描述标题的某种级别的内容

这是我给你的解决方案。希望它能满足你的要求。我只是在下面的模块中做了一些更改。如果您遇到任何问题，请随时通知

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
} 

功能{
位置：相对位置；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
填充：5%；
文本对齐：居中；
框大小：边框框；
}
.特征h2{
字号：1.5em；
颜色：#006699；
边际上限：0；
边缘底部：0.5em；
}
.特色a{
文字装饰：无；
}
.feature.icon{
字号：3em；
颜色：#575757；
}
.特点：以前{
内容：“；
位置：绝对位置；
底部：0px；
左：0px；
宽度：100%；
身高：0；
背景色：#003366；
过渡：所有0.33秒缓解；
z指数：10；
}
.特色.详情{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
显示：块；
不透明度：0；
z指数：15；
}
。功能：悬停：在{
身高：100%；
不透明度：1；
盒影：嵌入0px 0px 2px 2px rgba（75179219,0.75）；
z指数：10；
}
.功能：悬停。详细信息{
不透明度：1；
过渡：所有0.33秒缓解0.2秒；
}

主标题
主标题（再次）
描述标题的某种级别的内容