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

Question

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

我想在鼠标悬停时为图像添加渐变背景，如上图 link 所示。 这是我的渐变颜色。

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

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

我尝试用div标签更改img标签并给它背景图片来解决问题，但此后，插件不起作用。

Here is the default image before hover
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 覆盖 class 和 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>

叠加层 class 包含背景渐变并且必须提供 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;
  }
}

}

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

add gradient background to img tag when hover

html

css

jquery

gradient

hover

回答