使文本显示在褪色图像的顶部

Question

解决方案可能真的很简单，但是啊，我就是不明白。我有一个带有文本的div，我把它放在图像的相同位置。应该发生的是，它确实发生了，图像应该逐渐淡出，让文字更明显。唯一的问题是，我希望文本被隐藏，并且只有当用户将鼠标悬停在image/div文本框上时才可见。我尝试了一些东西，比如

.display {
visibility: hidden;
}
img.artwork:hover + .display {
visibility: visible; 
}

但这不起作用，因为它开始出现故障。我不能使用z-index，因为无论是图像还是div文本都在position: absolute或position: relative。对如何解决这个问题有什么想法吗?这是我现在的文件:

img.albumartwork:hover{
        opacity: .15;
        -webkit-transition: all 0.4s ease 0s;
    }

.display {
    font-size: 12px;
    font-weight: bold;
    width: 120px;
    height: 120px;
    color: rgb(220,221,229);
    text-align: center;
    margin-top: -120px;
    margin-left: 52.5px;
    background-color: rgba(0,0,0,0.6);
}

Answer 1

尝试在您的:hover上设置目标颜色属性

示例

div {     
  color: transparent;
  transition: 0.5s all ease ;
}
div:hover {  
  color: black;  
}
div:hover img {
  opacity: 0;
}
img {
  width: 150px;
  transition: 0.5s all ease ;
  position: absolute;
  left: 0;
}