Html 悬停时将渐变背景添加到img标记

我正在将psd文件中的公文包部分转换为html代码。

我想在悬停时为图像添加渐变背景，如您在上面的链接中所看到的。这是我的渐变颜色

linear-gradient(to right, #f659f8, #de4af8, #c33cf8, #a331f8, #7d2af9);

我知道我们不能给img标签以悬停效果，在css中使用背景图像属性很容易。但是，由于我使用了，我必须使用img标记来标记a标记内的图像

我试图解决这个问题，将img标签改为div标签，并给它背景图片，但在这之后，插件没有工作

问题是：当鼠标悬停在图像上时，如何向img标签添加渐变背景？

---

这是我的html代码

 <div class="row portfolio-project pt-30">
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product col-md-4 ">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product  col-md-4">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product col-md-4 ">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product col-md-4 pt-30">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product col-md-4 pt-30">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
    <a href="https://i.stack.imgur.com/4t08s.png" class="portfolio-product col-md-4 pt-30">
      <img src="https://i.stack.imgur.com/4t08s.png" class="w-100 d-block portfolio-image">
    </a>
  </div>

---

图像将覆盖背景渐变，因此即使你让它在悬停时出现，当加载内容时，它也会被覆盖

我建议您在锚定标签上使用

：before

，以实现此效果

确保锚定标记为

position:relative

，然后将伪元素设置为

position:absolute

，以及top、left、width和height值

然后，当用户将鼠标悬停在特定锚点上时，您可以“显示”应用于伪元素的渐变。

ANSWER 经过多次试验和研究，我找到了问题的解决办法。

我们必须在

标记之后添加

，并且必须为overlay类和img标记提供父div。这就是诀窍。因此，当我们将img标记悬停时，它不会将悬停赋予锚定标记

HTML代码就是这样

---

}

我尝试过这种方法和其他类似的解决方案，但每次都会给锚定标签带来悬停效果。由于

col-md-4

，标记具有填充。因此，渐变色宽度将大于图像大小。我还需要填充黑白图像，因此我无法删除填充。我已尝试将父覆盖类赋予img标记。但是，即使我给img标签z-index:-1；，背景渐变不出现<代码>

  $('.portfolio-project').magnificPopup({
   delegate: 'a', // child items selector, by clicking on it popup will open
   type: 'image',
   gallery: { enabled: true },
   zoom: {
    enabled: true, // By default it's false, so don't forget to enable it
    duration: 300, // duration of the effect, in milliseconds
    easing: 'ease-in-out', // CSS transition easing function
   }});

    <a href="img/image.jpg" class="portfolio-product col-md-4">
      <div class="img-content">
        <img src="img/image.jpg" class="w-100 d-block portfolio-image">
        <div class="portfolio-overlay"></div>
      </div>
    </a>

.img-content {
  position: relative;

  .portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: $gradient;
    opacity: 0;
    transition: all .3s ease;
}

&:hover {
  .portfolio-overlay {
    opacity: .8;
  }
}