Jump to content

add rollover hover state on gallery images with project name

Recommended Posts

Site URL: https://www.kailynmoore.com/

Hi! 

I used a gallery to create my homepage grid of projects because I wanted to customize the size of each block. However, it won't let me customize a hoverstate for these to display the name of the project. Ideally, I'd like there to be an opacity and the name of the client in the center of the image.

Any idea how to approach this? 

Thanks so much in advance!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

21 hours ago, kailynmoo said:

Site URL: https://www.kailynmoore.com/

Hi! 

I used a gallery to create my homepage grid of projects because I wanted to customize the size of each block. However, it won't let me customize a hoverstate for these to display the name of the project. Ideally, I'd like there to be an opacity and the name of the client in the center of the image.

Any idea how to approach this? 

Thanks so much in advance!

Can you enable Gallery Caption >> Add some caption? We can check & give code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 hours ago, tuanphan said:

Can you enable Gallery Caption >> Add some caption? We can check & give code easier

done! but ideally, they won't be there until you hover over the image. and then you see them on top of the image, instead of below.

 

there's a similar feature on the portfolio page module. but i wanted to create a custom grid so i used this gallery module.

Link to comment
On 4/30/2021 at 2:32 AM, kailynmoo said:

done! but ideally, they won't be there until you hover over the image. and then you see them on top of the image, instead of below.

 

there's a similar feature on the portfolio page module. but i wanted to create a custom grid so i used this gallery module.

Add to Design > Custom CSS

/* Masonry hover 2 */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption, .gallery-caption-wrapper {
    position: static !important;
    z-index: 100 !important;
    top: unset;
    transform: unset;
    height: initial;
    opacity: 1 !important;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.5); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 5/3/2021 at 11:56 PM, kailynmoo said:

THANK YOU SO MUCH!!

Do you want to improve these?

Site URL – https://www.kailynmoore.com/

1. (Tablet-Footer) Increase column 1 width?

kailynmoore.com-01-min.png

2. (Mobile-Footer) Center all elements in footer?

kailynmoore.com-02-min.png

3. (Mobile-Homepage) The page looks long. Want to add a back to top button?

kailynmoore.com-03-min.png

4. (Mobile-Header) Replace burger icon with pencil menu item?

kailynmoore.com-04-min.png

5. (Tablet-Header) Similar above

kailynmoore.com-05-min.png

6. (Mobile-About) Want to change list to 2 columns?

kailynmoore.com-06-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.