Hover over text for gallery GIFs

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

Hello,

I was hoping to have help with adding hover over text to my website. I have a gallery of GIFs that I would like the names of to fade on when hovered on. 

My website is https://www.justinjsloan.com

Thanks so much for your help.

On 2/28/2022 at 6:42 AM, justinjsloan said:

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

Hello,

I was hoping to have help with adding hover over text to my website. I have a gallery of GIFs that I would like the names of to fade on when hovered on. 

My website is https://www.justinjsloan.com

Thanks so much for your help.

You want

When hover gif >> show text over gif?? Is this right

If yes, can you add some text? then we can give code to show it over image easier

Hi Tuanphan,

That is correct! If the text could reveal by fade on the bottom of the gif that would be perfect.

I added the gif titles to the page, would that suffice for what you need?

Thanks so much.

On 3/5/2022 at 3:40 AM, justinjsloan said:

Hi Tuanphan,

That is correct! If the text could reveal by fade on the bottom of the gif that would be perfect.

I added the gif titles to the page, would that suffice for what you need?

Thanks so much.

Add this to Design > Custom CSS

/* Show title on hover */
.slide a:after {
    position: absolute;
    content: "";
    background: rgba(0,0,0,0.5);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
	pointer-events: none;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
	opacity: 1;
}
.image-slide-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
	pointer-events: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}

Hi Tuanphan,

That worked. Thank you so much for the help!