add gradient background to img tag when hover

Question

I'm converting the portfolio section on the psd file to html code. This is what portfolio section looks like.

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

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

That is my html code.

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

user_10666806 · Answer

ANSWER

After many trials and researches, I found the solution of the problem.

We have to add

after tag and must give parent div to overlay class and img tag. That is the trick. Thus, when we hover the img tag, it will not give hover to anchor tag.

HTML code is just like this.

Overlay class contains background-gradient and must give position: absolute. Relative div will be parent div. And must give opacity: 0 to disappear the gradient background. After hover on parent divç give opacity higher than 0 to appear it.

Here is SCSS code.

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

}

user_1704627 · Answer

The image would overlay the background gradient, so even if you get it to appear when on hover, when content is loaded it would be covered up.

May I recommend you use a :before on the anchor tags to achieve this effect.

Ensure that your anchor tags are position:relative and then set the pseudo element to be position: absolute along with top, left, width and height values.

You can then "reveal" the gradient applied to the pseudo element when a user hovers over the particular anchor.

add gradient background to img tag when hover

2 Answers

ANSWER