Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Using a hover effect with description for Masonry Gallery


JCreateMore

Question

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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...