如何在懸停的圖像上顯示圖像

Question

我知道這個問題可能已被回答了幾次。但我需要一個適用於任何圖像的解決方案。

我有一個portoflio其中有4個圖像。所以它顯示圖像，我想在懸停時顯示Github徽標的圖像。

我已經發現了這一點：

a:hover:before { 
    content: ''; 
    display: block; 
    background: rgba(255, 0, 0, .5); /* your background */ 
    width: 500px; 
    height: 500px; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

但它需要的寬度和高度的。我的圖片沒有相同的高度，所以我需要一個適合圖片懸停的css/jQuery/angular代碼。

謝謝！

Answer 1

試試這個，它會一直覆蓋它的父母。您可以編輯背景位置以適合您的需求。

a:hover:before { 
     content: ''; 
     display: block; 
     background: url('img-path.png') no-repeat; 
     background-position: right bottom; 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     right: 0; 
    } 

編輯：的盤旋一個標籤應使用position: relative;