Custom CSS for Hover Text Background Reveal

Site URL: https://www.loxd.io/portfolio-2

Hello! 

I'm looking to achieve a hover effect where once you over a logo image, a background image would reveal itself. I have the desired effect here with the big logotype in the center: https://www.loxd.io/portfolio-2 however it was only achieve by using the portfolio hover styling layout and changing the text link to a logo image via css on 7.1.

I think it can be better achieved by css without the use of the portfolio hover styling layout by targeting the background image and an image file but I'm unsure how to style the code along with it being responsive to different widths. Here's a working code that I've been tweaking with no success. 

.background {
visibility: hidden; 
opacity: 0;
transition-duration: 1s; 
}

.logo:hover .background {
visibility: visible; 
opacity: 1;
}

Thanks for the help!