Using a hover effect with description for Masonry Gallery

Site URL: https://frog-emu-zms4.squarespace.com/config/

Hi,

I'm looking at having a hover effect with a decription similar to the below site

https://4040creative.com.au/work

I have done some custom CSS to my website but can't figure out how to have something similar to the above

This is the CSS I'm currently using :

 

.gallery-caption p{color:white; font-size:1.5rem!important;     
  font-family: 'Karla-Light'!important;
padding:10px!important}

.gallery-caption {background:#587FFC;
margin-top:-20%; opacity:0!important}

.gallery-masonry-item:hover .gallery-caption {opacity:1!important;
transition:.5s ease-in!important;
transition:.5s ease-out!important;
}

Attached is how it looks....

I would like the blue to cover the whole image while allowing a click through to see option.

Thanks,
Jon





 

Try this guide.

Also, your site is private. You should setup password & share url again. We can help easier