Clickable List images and hover effects

In the post Make list images clickable Squarespace 7.1, @tuanphan provided a great solution for making the whole card area clickable. 

Prior to using this solution however, I had a hover animation effect on the list images. Since this solution expands the button to transparently cover the entire card area, hovering over the image no longer works to trigger the animation. 

My question is if there is a way to still have individual elements (e.g., the image, title, description) responsive to hover after making the whole card clickable? 

incidentally, the animation I'm using is

.list-item[data-is-card-enabled="true"] img:hover{ 
  transform: scale(1.2);
  transition: .4s;
  overflow: hidden;  
}

which causes the image to expand slightly when you hover over it.

Currently, I have set the image z-index high so the animation works, but that means the card is clickable, but not over the image.

THANKS

The site has not been made public and is password protected-  see2theSea@dawn

the site is https://www.conservenassau.org/wildlifecorridors#resources 

I think the setup that you have now is probably about the best solution. The click through is not the same element that is animated so you have to put one ahead of the other. You may be able to trigger the image animation based on the button hover state. Something along these lines:

button:hover {
   img {
       transform:scale(1.2);
   }
}

Thanks much Ziggy for your comments and suggestion. Unfortunately it didn't work. The overlain button container still wins. 

Nice. Thanks for working this out. I thought it might be javascript problem, but I wouldn't have known how to do it.