Question

我知道这个问题可能已被回答过几次。但我需要一个适用于任何图像的解决方案。

我有一个有4个图像的portoflio。所以它显示图像，我想在悬停时显示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;
    }

编辑：悬停的a-tag应使用position: relative;

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

1 个答案: