Help with Image showing overlay title animation upon hover

Site URL: https://www.jorigoh.com/studioportraits

Hello,

I want to achieve an overlay animation appearing upon hovering my images in a gallery grid. Something like when you hover the cursor over the images in the grid gallery and it turns dark with caption/title and you can click to a new page.

I can add a clickthrough URL, but it just displays my cursor changing into the clickable icon. No hover animation overlay whatsoever. Appreciate it!

Thanks

Hi.

The above link doesn't exist.

If anyone interested with this, add this code to Home > Design > Custom CSS

/* Gallery Grid hover effect - by tuanphan */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* 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-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Hi @tuanphan — Will this work for a blog collection/masonry grid? If so, is there language I need to sub in for .gallery-grid-item everywhere it's written in your CSS code? 

16 hours ago, lifeofpie said:

Hi @tuanphan — Will this work for a blog collection/masonry grid? If so, is there language I need to sub in for .gallery-grid-item everywhere it's written in your CSS code? 

The code for Gallery, not blog. If you need effect on blog page, please share link to blog page, we can check easier.

Hi @tuanphan , I am using your code which is very useful. Can you help me understand how to change it in order to make the caption text bigger ?

Also, is there a way to overlay buttons in a gallery slideshow ?

Thank you !

On 11/24/2020 at 8:49 PM, AlessiaTa said:

Hi @tuanphan , I am using your code which is very useful. Can you help me understand how to change it in order to make the caption text bigger ?

Also, is there a way to overlay buttons in a gallery slideshow ?

Thank you !

Have you solved it yet?

Hi @tuanphan!

No not yet sorry... I have created this topic to detail my issue more properly but haven't had any answers yet !

Hi. I answered in your own post