如何在悬停的图像上显示图像

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;