文字是透明的而不是全彩色

Question

我是堆叠*的新手。我的文字似乎在下面的小提琴中有问题。尝试将鼠标悬停在图像上。

Fiddlelink is here

/*text*/

.container .head {
font-size: 50px;
text-align: center;
position: absolute;
align-self: center;
font-family: sans-serif; 
font-weight: 800;
color: white;
line-height: 100px;
opacity: 0; 
width: 100%;
}

.container:hover .head , .container:hover .Description{
opacity: 1; 
    -webkit-transition-delay:.2s;

}

.container .textarea {
display: block;
position: relative;
align-self: center;
}

.container .Description {
position: absolute;
font-size: 24px;
text-align: center;
align-self: center;
font-family: sans-serif; 
font-weight: 0;
color: white;
line-height: 100px;
width: 100%;
font-variant: small-caps;
opacity: 0;

}

.item{
top: 150px;
position: relative;
align-self: center;
margin: auto;


}

.line {
    margin: auto;
    height: 1px;
    width:0%;
   text-align: center;


}
.container:hover .line {
  width:80%;
  /*background: #fff;*/
  background: red;
            -webkit-transition: 0.8s ease-out;
          -moz-transition: all 0.8s ease-out;
          -o-transition: all 0.8s ease-out;
          transition: all 0.8s ease-out;   
          margin: auto;
} 

我的文字是透明的，而我更喜欢白色。我试图改变位置，但没有结果。