悬停时向 img 标签添加渐变背景

Question

我正在将 psd 文件中的投资组合部分转换为 html 代码。 This is what portfolio section looks like.

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

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

我知道我们不能给 img 标签提供悬停效果，并且很容易在 css 中使用 background-image 属性。但是，由于我使用magnific popup plugin，所以我必须对 a 标签内的图像使用 img 标签。

我试图解决这个问题，用 div 标签更改 img 标签并赋予它背景图像，但在此之后，插件不起作用。

1. Here is the default image before hover
2. Here is what we want to achieve after hover on image

问题是：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>

这是华丽的弹出 jquery 代码。

  $('.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
   }});

Answer 1

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

我建议您在锚标签上使用:before 来实现此效果。

确保您的锚标记为position:relative，然后将伪元素设置为position: absolute 以及顶部、左侧、宽度和高度值。

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

Answer 2

回答

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

我们必须在<img>标签之后添加<div class="overlay" ></div>，并且必须将父div赋予覆盖类和img标签。这就是诀窍。因此，当我们将 img 标签悬停时，它不会将悬停给锚标签。

HTML 代码就是这样。

    <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>

Overlay 类包含背景渐变，必须提供position: absolute。相对 div 将是父 div。并且必须给opacity: 0 让渐变背景消失。将鼠标悬停在父 divç 上后，使不透明度高于 0 以显示它。

这里是 SCSS 代码。

.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;
  }
}

}