仅使用 css 悬停时覆盖图像答案

【问题标题】：Overlay image on hover using only css仅使用 css 悬停时覆盖图像
【发布时间】：2017-01-06 09:43:27
【问题描述】：

我正在尝试用一个较小的图像覆盖一个图像，该图像在悬停时具有第一张图像的背景不透明度，仅使用 css，因为我无法编辑 html。

这是一个示例 HTML：

<div class="image">
  <a href="http://www.example.com">
    <img src="/uploads/2016/08/img1.png" class="rggclImgCenter">
  </a>
</div>

仅使用 CSS，我认为会是这样的：

.image:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

但它只会替换图像。

【问题讨论】：

标签： html css

【解决方案1】：

尝试在:hover 上添加:before 元素。

.image a:hover:before {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

【讨论】：

感谢您的回复@andrew，但它只会替换图像。我想要发生的事情是这样的link 没有 lorem ipsum。只接触css，因为我无法编辑html
那么您需要在:hover 上为您的链接添加一个:after 选择器，因为覆盖应该是不同的元素以避免背景规则覆盖。请参阅此 SO 问题，例如 stackoverflow.com/questions/13233991/combine-after-with-hover 。

【解决方案2】：

如果您不想（或不能）修改 html，可以使用 css pseudo element。

请注意，您不能在 img 元素上使用 :before 或 :after

这是 CSS：

img { max-width: 300px; } /* the image dimension */

.image a { position: relative; display: inline-block; } /* allow :before element positioning easier */
.image a:hover:before {
  position: absolute;
  top: 30px; left: 40px; /* Where to put the overlay */
  display: inline-block;
  content: ''; /* must have */
  width: 300px; height: 164px; /* size of the element */
  background-image: url('https://i.kinja-img.com/gawker-media/image/upload/s--pEKSmwzm--/c_scale,fl_progressive,q_80,w_800/1414228815325188681.jpg'); /* URL of the image */
  background-size: 300px 164px; /* Resize the image as this dimension */
  opacity: .5; /* Transparent rate */
}

你可以试试https://jsfiddle.net/bq9khtz3/

【讨论】：

【解决方案3】：

使图像透明：

.image a:hover image {
   opacity: 0;
 }

显示你的背景图片

.image a:hover {
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  /* add other properties */
}

【讨论】：

【解决方案4】：

没有原图，所以用了自己的图。看看这是否有帮助。

您也可以参考这个链接：https://jsfiddle.net/askptx0y/

.image:hover {
  background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
  background-repeat: no-repeat;
  opacity: 1;
}
img:hover {
  opacity: 0.5;
}

<div class="image">
  <a href="http://www.example.com">
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="rggclImgCenter">
  </a>
</div>

【讨论】：

【解决方案5】：

    .image:hover img {
    -webkit-filter: brightness(40%);
    -moz-filter: brightness(40%);
    -ms-filter: brightness(40%);
    -o-filter: brightness(40%);
}
.image:hover img:after {
   content: '';
   display: block;
   position: absolute;
   background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
}

【讨论】：