Jump to content

7.1 Masonry - Description on Hover

Recommended Posts

Posted (edited)

Hi all, 

I have the following code and i'm just trying to have the gallery descriptions appear on hover. Ideally i'd like to have the gallery black and white, color and zoom on hover. So far this works but i'm just unsure how to make incorporate the description on hover.

Current Code: 

.gallery-masonry-item 
img{filter:grayscale(100%); transition:.25s}
img:hover{filter:grayscale(0%)} 
img:hover{height:100%!important; width:100%!important; transform:Scale(1.2);
overflow:hidden!important; transition-duration:1s}
Gallery-code-name{overflow:hidden!important}

 

Website: https://reindeer-oleander-5k4j.squarespace.com/

PW: Demo

Edited by Kev86
  • Replies 5
  • Views 476
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)
On 2/16/2023 at 3:16 AM, tuanphan said:

You mean Initial: hide caption

Hover: show caption under image

?

Yes but not under the image, in the center of the image. Ideally I can tweak the font as well.  

Edited by Kev86

Create an account or sign in to comment

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


×
×
  • 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.