使文字出現在褪色圖像的頂部

解決方案可能非常簡單，但是我只是無法得到它。我有一個文本的div，我把它放在圖像的相同位置。應該發生的事情是，圖像應該淡出，使文本更加明顯。唯一的事情是，我希望文本被隱藏起來，並且只有在用戶將鼠標懸停在圖像/文本框上時纔會顯示。我嘗試了一些東西，如使文字出現在褪色圖像的頂部

.display { 
visibility: hidden; 
} 

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

但這不起作用，因爲它只是開始毛刺。我無法使用z-index，因爲圖像和div文本都不在位置上：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); 

}

來源

2014-07-02 user3757990

你仍然可以使用的z-index與位置相對 –

嘗試目標顏色屬性在你的：翱翔 – qtgye

小提琴會超級有用:) – user3757990

嘗試目標上的顏色屬性您:hover

SAMPLE

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; 
}

來源

2014-07-02 09:52:17 qtgye

使文字出現在褪色圖像的頂部

回答

相關問題