Tabs Change Hero Background Image on Hover

I’m trying to create interactions within my hero, where the background image changes when an individual column is hovered over. I currently have those interactions set up and working, but the images don’t fade in/out both ways. I’m not sure how to get the images to fade in/out on any interaction.

Separate, but related, when a particular column and its corresponding image is in view, I’d like to have an absolute positioned image fade into the left side of the column (see image below) and stay visible until the next column is hovered over.

I’m not sure if this can be accomplished or not with interactions, maybe I need to add some custom code?

Any help or ideas are appreciated!

Here is my public share link: