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

Good Day!

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


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!

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