Jump to content

Using a hover effect with description for Masonry Gallery

Recommended Posts

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






 

Screen Shot 2021-01-04 at 1.10.12 pm.png

Link to comment
  • Replies 1
  • Views 386
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.