On hover out instead of fade (like wanted) animation jumps

HTML-CSS
1

Good Day!

I can’t find the problem causing the opacity transition to jump when hovering out of a div…

https://www.forcewerk.com/2018/wordpress/

If you hover on the bottom part of the portfolio elements / images you’ll see the text fading in. But when I hover out the headline is jumping to opacity 0 (instead of fading out). However, the subline works fine. :face_with_raised_eyebrow:

The semi-transparent background gradient on the bottom isn’t being shown animated at all. It just jumps when hovering in/out, even though I set an animation:

 .portfolio-info {
	 background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.0));
	-moz-transition: background 1s ease-in;
    -o-transition: background 1s ease-in;
    -webkit-transition: background 1s ease-in;
    transition: background 1s ease-in;

}
 .portfolio-info:hover {
	 background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.25));
}

Could anyone please point out what I’m missing?
Thanks so much!
Regards

2

Add transition to the h3 element for both hover and normal state, add the seconds more like 0.7s to see the difference.