add rollover hover state on gallery images with project name

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!

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

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.

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;
}

THANK YOU SO MUCH!!

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?

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

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

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

5. (Tablet-Header) Similar above

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