I'm converting the portfolio section on the psd file to html code.
[This is what portfolio section looks like.](https://i.stack.imgur.com/mQmK4.png)

**I want to add gradient background to image when on hover as you see in the link above.** This is my gradient color.

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

```

I know we cannot give hover effect to img tag and it is easy to do with background-image property in css. But, since I use [magnific popup plugin](https://dimsemenov.com/plugins/magnific-popup/documentation.html), I have to use the img tag for images inside the a tag.

I tried to solve the problem to change img tag with div tag and give it background-image, but after this, plugin didn't work.

1. [Here is the default image before hover](https://i.stack.imgur.com/4t08s.png)
2. **[Here is what we want to achieve after hover on image](https://i.stack.imgur.com/1L36h.png)**

The question is: **How to add gradient background to img tag when hover on image?**

---

That is my html code.

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

```

And this is the magnific popup jquery code.

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

```